atash/chronus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

Compare commits

base: atash:2.2.1
Branches Tags
atash:main
atash:2.4.0 atash:2.3.0 atash:2.2.1 atash:2.2.0 atash:2.1.0 atash:2.0.0
..
compare: atash:2.4.0
Branches Tags
atash:main
atash:2.4.0 atash:2.3.0 atash:2.2.1 atash:2.2.0 atash:2.1.0 atash:2.0.0

17 Commits
2.2.1 ... 2.4.0

Author SHA1 Message Date
Atridad Lahiji
caf763aa1e Moar
All checks were successful
Docker Deploy / build-and-push (push) Successful in 4m6s
Details
2026-02-09 02:28:54 -07:00
Atridad Lahiji
12d59bb42f Refactored a bunch of shit
All checks were successful
Docker Deploy / build-and-push (push) Successful in 3m57s
Details
2026-02-09 01:49:19 -07:00
Atridad Lahiji
c39865031a Deps
All checks were successful
Docker Deploy / build-and-push (push) Successful in 4m3s
Details
2026-02-02 23:19:50 -07:00
Atridad Lahiji
abbf39f160 Theme select & Accessability :^)
All checks were successful
Docker Deploy / build-and-push (push) Successful in 4m0s
Details
2026-01-27 14:26:14 -07:00
Atridad Lahiji
e2949a28ef Update new.astro
All checks were successful
Docker Deploy / build-and-push (push) Successful in 4m9s
Details
2026-01-20 12:59:32 -07:00
Atridad Lahiji
8b91ec7a71 Updated to Astro 6 beta
All checks were successful
Docker Deploy / build-and-push (push) Successful in 3m52s
Details
2026-01-20 12:37:08 -07:00
Atridad Lahiji
815c08dd50 Schema fixes
All checks were successful
Docker Deploy / build-and-push (push) Successful in 3m59s
Details
2026-01-20 12:08:06 -07:00
Atridad Lahiji
55eb03165e Fixed migrations
All checks were successful
Docker Deploy / build-and-push (push) Successful in 4m2s
Details
2026-01-20 11:36:52 -07:00
Atridad Lahiji
a4071d6e40 Fixed charts
All checks were successful
Docker Deploy / build-and-push (push) Successful in 4m3s
Details
2026-01-20 11:24:41 -07:00
Atridad Lahiji
fff0e14a4b Fixed
Some checks failed
Docker Deploy / build-and-push (push) Failing after 3m7s
Details
2026-01-20 11:10:31 -07:00
Atridad Lahiji
ad7dc18780 Switch to tags
Some checks failed
Docker Deploy / build-and-push (push) Has been cancelled
Details
2026-01-20 11:09:09 -07:00
Atridad Lahiji
de5b1063b7 Migrate
All checks were successful
Docker Deploy / build-and-push (push) Successful in 4m24s
Details
2026-01-20 10:47:43 -07:00
Atridad Lahiji
82b45fdfe4 O_O
All checks were successful
Docker Deploy / build-and-push (push) Successful in 4m2s
Details
2026-01-20 10:32:14 -07:00
Atridad Lahiji
b5ac2e0608 Oops
All checks were successful
Docker Deploy / build-and-push (push) Successful in 4m0s
Details
2026-01-20 01:21:56 -07:00
Atridad Lahiji
6bed4b4709 Last fix for the night...
All checks were successful
Docker Deploy / build-and-push (push) Successful in 4m9s
Details
2026-01-20 01:06:06 -07:00
Atridad Lahiji
54cac49b70 OOOOOPS
All checks were successful
Docker Deploy / build-and-push (push) Successful in 3m56s
Details
2026-01-19 23:39:00 -07:00
Atridad Lahiji
effc6ac37e oops
All checks were successful
Docker Deploy / build-and-push (push) Successful in 4m6s
Details
2026-01-19 22:25:25 -07:00
87 changed files with 4376 additions and 7120 deletions
Expand all files Collapse all files

5
astro.config.mjs
View File

@@ -10,11 +10,12 @@ import node from "@astrojs/node";
export default defineConfig({
output: "server",
integrations: [vue(), icon()],
security: {
csp: process.env.NODE_ENV === "production",
},
vite: {
plugins: [tailwindcss()],
},
adapter: node({
mode: "standalone",
}),

64
drizzle/0000_motionless_king_cobra.sql → drizzle/0000_lazy_rictor.sql
View File

@@ -10,24 +10,23 @@ CREATE TABLE `api_tokens` (
);
--> statement-breakpoint
CREATE UNIQUE INDEX `api_tokens_token_unique` ON `api_tokens` (`token`);--> statement-breakpoint
CREATE TABLE `categories` (
`id` text PRIMARY KEY NOT NULL,
`organization_id` text NOT NULL,
`name` text NOT NULL,
`color` text,
`created_at` integer,
FOREIGN KEY (`organization_id`) REFERENCES `organizations`(`id`) ON UPDATE no action ON DELETE no action
);
--> statement-breakpoint
CREATE INDEX `api_tokens_user_id_idx` ON `api_tokens` (`user_id`);--> statement-breakpoint
CREATE TABLE `clients` (
`id` text PRIMARY KEY NOT NULL,
`organization_id` text NOT NULL,
`name` text NOT NULL,
`email` text,
`phone` text,
`street` text,
`city` text,
`state` text,
`zip` text,
`country` text,
`created_at` integer,
FOREIGN KEY (`organization_id`) REFERENCES `organizations`(`id`) ON UPDATE no action ON DELETE no action
);
--> statement-breakpoint
CREATE INDEX `clients_organization_id_idx` ON `clients` (`organization_id`);--> statement-breakpoint
CREATE TABLE `invoice_items` (
`id` text PRIMARY KEY NOT NULL,
`invoice_id` text NOT NULL,
@@ -38,6 +37,7 @@ CREATE TABLE `invoice_items` (
FOREIGN KEY (`invoice_id`) REFERENCES `invoices`(`id`) ON UPDATE no action ON DELETE no action
);
--> statement-breakpoint
CREATE INDEX `invoice_items_invoice_id_idx` ON `invoice_items` (`invoice_id`);--> statement-breakpoint
CREATE TABLE `invoices` (
`id` text PRIMARY KEY NOT NULL,
`organization_id` text NOT NULL,
@@ -50,6 +50,9 @@ CREATE TABLE `invoices` (
`notes` text,
`currency` text DEFAULT 'USD' NOT NULL,
`subtotal` integer DEFAULT 0 NOT NULL,
`discount_value` real DEFAULT 0,
`discount_type` text DEFAULT 'percentage',
`discount_amount` integer DEFAULT 0,
`tax_rate` real DEFAULT 0,
`tax_amount` integer DEFAULT 0 NOT NULL,
`total` integer DEFAULT 0 NOT NULL,
@@ -58,6 +61,8 @@ CREATE TABLE `invoices` (
FOREIGN KEY (`client_id`) REFERENCES `clients`(`id`) ON UPDATE no action ON DELETE no action
);
--> statement-breakpoint
CREATE INDEX `invoices_organization_id_idx` ON `invoices` (`organization_id`);--> statement-breakpoint
CREATE INDEX `invoices_client_id_idx` ON `invoices` (`client_id`);--> statement-breakpoint
CREATE TABLE `members` (
`user_id` text NOT NULL,
`organization_id` text NOT NULL,
@@ -68,6 +73,8 @@ CREATE TABLE `members` (
FOREIGN KEY (`organization_id`) REFERENCES `organizations`(`id`) ON UPDATE no action ON DELETE no action
);
--> statement-breakpoint
CREATE INDEX `members_user_id_idx` ON `members` (`user_id`);--> statement-breakpoint
CREATE INDEX `members_organization_id_idx` ON `members` (`organization_id`);--> statement-breakpoint
CREATE TABLE `organizations` (
`id` text PRIMARY KEY NOT NULL,
`name` text NOT NULL,
@@ -77,9 +84,33 @@ CREATE TABLE `organizations` (
`state` text,
`zip` text,
`country` text,
`default_tax_rate` real DEFAULT 0,
`default_currency` text DEFAULT 'USD',
`created_at` integer
);
--> statement-breakpoint
CREATE TABLE `passkey_challenges` (
`id` text PRIMARY KEY NOT NULL,
`challenge` text NOT NULL,
`user_id` text,
`expires_at` integer NOT NULL
);
--> statement-breakpoint
CREATE UNIQUE INDEX `passkey_challenges_challenge_unique` ON `passkey_challenges` (`challenge`);--> statement-breakpoint
CREATE TABLE `passkeys` (
`id` text PRIMARY KEY NOT NULL,
`user_id` text NOT NULL,
`public_key` text NOT NULL,
`counter` integer NOT NULL,
`device_type` text NOT NULL,
`backed_up` integer NOT NULL,
`transports` text,
`last_used_at` integer,
`created_at` integer,
FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action
);
--> statement-breakpoint
CREATE INDEX `passkeys_user_id_idx` ON `passkeys` (`user_id`);--> statement-breakpoint
CREATE TABLE `sessions` (
`id` text PRIMARY KEY NOT NULL,
`user_id` text NOT NULL,
@@ -87,6 +118,7 @@ CREATE TABLE `sessions` (
FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action
);
--> statement-breakpoint
CREATE INDEX `sessions_user_id_idx` ON `sessions` (`user_id`);--> statement-breakpoint
CREATE TABLE `site_settings` (
`id` text PRIMARY KEY NOT NULL,
`key` text NOT NULL,
@@ -100,27 +132,33 @@ CREATE TABLE `tags` (
`organization_id` text NOT NULL,
`name` text NOT NULL,
`color` text,
`rate` integer DEFAULT 0,
`created_at` integer,
FOREIGN KEY (`organization_id`) REFERENCES `organizations`(`id`) ON UPDATE no action ON DELETE no action
);
--> statement-breakpoint
CREATE INDEX `tags_organization_id_idx` ON `tags` (`organization_id`);--> statement-breakpoint
CREATE TABLE `time_entries` (
`id` text PRIMARY KEY NOT NULL,
`user_id` text NOT NULL,
`organization_id` text NOT NULL,
`client_id` text NOT NULL,
`category_id` text NOT NULL,
`start_time` integer NOT NULL,
`end_time` integer,
`description` text,
`invoice_id` text,
`is_manual` integer DEFAULT false,
`created_at` integer,
FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action,
FOREIGN KEY (`organization_id`) REFERENCES `organizations`(`id`) ON UPDATE no action ON DELETE no action,
FOREIGN KEY (`client_id`) REFERENCES `clients`(`id`) ON UPDATE no action ON DELETE no action,
FOREIGN KEY (`category_id`) REFERENCES `categories`(`id`) ON UPDATE no action ON DELETE no action
FOREIGN KEY (`client_id`) REFERENCES `clients`(`id`) ON UPDATE no action ON DELETE no action
);
--> statement-breakpoint
CREATE INDEX `time_entries_user_id_idx` ON `time_entries` (`user_id`);--> statement-breakpoint
CREATE INDEX `time_entries_organization_id_idx` ON `time_entries` (`organization_id`);--> statement-breakpoint
CREATE INDEX `time_entries_client_id_idx` ON `time_entries` (`client_id`);--> statement-breakpoint
CREATE INDEX `time_entries_start_time_idx` ON `time_entries` (`start_time`);--> statement-breakpoint
CREATE INDEX `time_entries_invoice_id_idx` ON `time_entries` (`invoice_id`);--> statement-breakpoint
CREATE TABLE `time_entry_tags` (
`time_entry_id` text NOT NULL,
`tag_id` text NOT NULL,
@@ -129,6 +167,8 @@ CREATE TABLE `time_entry_tags` (
FOREIGN KEY (`tag_id`) REFERENCES `tags`(`id`) ON UPDATE no action ON DELETE no action
);
--> statement-breakpoint
CREATE INDEX `time_entry_tags_time_entry_id_idx` ON `time_entry_tags` (`time_entry_id`);--> statement-breakpoint
CREATE INDEX `time_entry_tags_tag_id_idx` ON `time_entry_tags` (`tag_id`);--> statement-breakpoint
CREATE TABLE `users` (
`id` text PRIMARY KEY NOT NULL,
`email` text NOT NULL,

3
drizzle/0001_demonic_red_skull.sql Normal file
View File

@@ -0,0 +1,3 @@
DROP TABLE `time_entry_tags`;--> statement-breakpoint
ALTER TABLE `time_entries` ADD `tag_id` text REFERENCES tags(id);--> statement-breakpoint
CREATE INDEX `time_entries_tag_id_idx` ON `time_entries` (`tag_id`);

6
drizzle/0001_lazy_roughhouse.sql
View File

@@ -1,6 +0,0 @@
ALTER TABLE `clients` ADD `phone` text;--> statement-breakpoint
ALTER TABLE `clients` ADD `street` text;--> statement-breakpoint
ALTER TABLE `clients` ADD `city` text;--> statement-breakpoint
ALTER TABLE `clients` ADD `state` text;--> statement-breakpoint
ALTER TABLE `clients` ADD `zip` text;--> statement-breakpoint
ALTER TABLE `clients` ADD `country` text;

16
drizzle/0002_chilly_cyclops.sql
View File

@@ -1,16 +0,0 @@
CREATE INDEX `api_tokens_user_id_idx` ON `api_tokens` (`user_id`);--> statement-breakpoint
CREATE INDEX `categories_organization_id_idx` ON `categories` (`organization_id`);--> statement-breakpoint
CREATE INDEX `clients_organization_id_idx` ON `clients` (`organization_id`);--> statement-breakpoint
CREATE INDEX `invoice_items_invoice_id_idx` ON `invoice_items` (`invoice_id`);--> statement-breakpoint
CREATE INDEX `invoices_organization_id_idx` ON `invoices` (`organization_id`);--> statement-breakpoint
CREATE INDEX `invoices_client_id_idx` ON `invoices` (`client_id`);--> statement-breakpoint
CREATE INDEX `members_user_id_idx` ON `members` (`user_id`);--> statement-breakpoint
CREATE INDEX `members_organization_id_idx` ON `members` (`organization_id`);--> statement-breakpoint
CREATE INDEX `sessions_user_id_idx` ON `sessions` (`user_id`);--> statement-breakpoint
CREATE INDEX `tags_organization_id_idx` ON `tags` (`organization_id`);--> statement-breakpoint
CREATE INDEX `time_entries_user_id_idx` ON `time_entries` (`user_id`);--> statement-breakpoint
CREATE INDEX `time_entries_organization_id_idx` ON `time_entries` (`organization_id`);--> statement-breakpoint
CREATE INDEX `time_entries_client_id_idx` ON `time_entries` (`client_id`);--> statement-breakpoint
CREATE INDEX `time_entries_start_time_idx` ON `time_entries` (`start_time`);--> statement-breakpoint
CREATE INDEX `time_entry_tags_time_entry_id_idx` ON `time_entry_tags` (`time_entry_id`);--> statement-breakpoint
CREATE INDEX `time_entry_tags_tag_id_idx` ON `time_entry_tags` (`tag_id`);

3
drizzle/0003_amusing_wendigo.sql
View File

@@ -1,3 +0,0 @@
ALTER TABLE `invoices` ADD `discount_value` real DEFAULT 0;--> statement-breakpoint
ALTER TABLE `invoices` ADD `discount_type` text DEFAULT 'percentage';--> statement-breakpoint
ALTER TABLE `invoices` ADD `discount_amount` integer DEFAULT 0;

22
drizzle/0004_happy_namorita.sql
View File

@@ -1,22 +0,0 @@
CREATE TABLE `passkey_challenges` (
`id` text PRIMARY KEY NOT NULL,
`challenge` text NOT NULL,
`user_id` text,
`expires_at` integer NOT NULL
);
--> statement-breakpoint
CREATE UNIQUE INDEX `passkey_challenges_challenge_unique` ON `passkey_challenges` (`challenge`);--> statement-breakpoint
CREATE TABLE `passkeys` (
`id` text PRIMARY KEY NOT NULL,
`user_id` text NOT NULL,
`public_key` text NOT NULL,
`counter` integer NOT NULL,
`device_type` text NOT NULL,
`backed_up` integer NOT NULL,
`transports` text,
`last_used_at` integer,
`created_at` integer,
FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action
);
--> statement-breakpoint
CREATE INDEX `passkeys_user_id_idx` ON `passkeys` (`user_id`);

455
drizzle/meta/0000_snapshot.json
View File

@@ -1,7 +1,7 @@
{
"version": "6",
"dialect": "sqlite",
"id": "e1e0fee4-786a-4f9f-9ebe-659aae0a55be",
"id": "8343b003-264b-444a-9782-07d736dd3407",
"prevId": "00000000-0000-0000-0000-000000000000",
"tables": {
"api_tokens": {
@@ -65,6 +65,13 @@
"token"
],
"isUnique": true
},
"api_tokens_user_id_idx": {
"name": "api_tokens_user_id_idx",
"columns": [
"user_id"
],
"isUnique": false
}
},
"foreignKeys": {
@@ -86,65 +93,6 @@
"uniqueConstraints": {},
"checkConstraints": {}
},
"categories": {
"name": "categories",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"organization_id": {
"name": "organization_id",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"name": {
"name": "name",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"color": {
"name": "color",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"created_at": {
"name": "created_at",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false
}
},
"indexes": {},
"foreignKeys": {
"categories_organization_id_organizations_id_fk": {
"name": "categories_organization_id_organizations_id_fk",
"tableFrom": "categories",
"tableTo": "organizations",
"columnsFrom": [
"organization_id"
],
"columnsTo": [
"id"
],
"onDelete": "no action",
"onUpdate": "no action"
}
},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
},
"clients": {
"name": "clients",
"columns": {
@@ -176,6 +124,48 @@
"notNull": false,
"autoincrement": false
},
"phone": {
"name": "phone",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"street": {
"name": "street",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"city": {
"name": "city",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"state": {
"name": "state",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"zip": {
"name": "zip",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"country": {
"name": "country",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"created_at": {
"name": "created_at",
"type": "integer",
@@ -184,7 +174,15 @@
"autoincrement": false
}
},
"indexes": {},
"indexes": {
"clients_organization_id_idx": {
"name": "clients_organization_id_idx",
"columns": [
"organization_id"
],
"isUnique": false
}
},
"foreignKeys": {
"clients_organization_id_organizations_id_fk": {
"name": "clients_organization_id_organizations_id_fk",
@@ -253,7 +251,15 @@
"default": 0
}
},
"indexes": {},
"indexes": {
"invoice_items_invoice_id_idx": {
"name": "invoice_items_invoice_id_idx",
"columns": [
"invoice_id"
],
"isUnique": false
}
},
"foreignKeys": {
"invoice_items_invoice_id_invoices_id_fk": {
"name": "invoice_items_invoice_id_invoices_id_fk",
@@ -357,6 +363,30 @@
"autoincrement": false,
"default": 0
},
"discount_value": {
"name": "discount_value",
"type": "real",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": 0
},
"discount_type": {
"name": "discount_type",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": "'percentage'"
},
"discount_amount": {
"name": "discount_amount",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": 0
},
"tax_rate": {
"name": "tax_rate",
"type": "real",
@@ -389,7 +419,22 @@
"autoincrement": false
}
},
"indexes": {},
"indexes": {
"invoices_organization_id_idx": {
"name": "invoices_organization_id_idx",
"columns": [
"organization_id"
],
"isUnique": false
},
"invoices_client_id_idx": {
"name": "invoices_client_id_idx",
"columns": [
"client_id"
],
"isUnique": false
}
},
"foreignKeys": {
"invoices_organization_id_organizations_id_fk": {
"name": "invoices_organization_id_organizations_id_fk",
@@ -455,7 +500,22 @@
"autoincrement": false
}
},
"indexes": {},
"indexes": {
"members_user_id_idx": {
"name": "members_user_id_idx",
"columns": [
"user_id"
],
"isUnique": false
},
"members_organization_id_idx": {
"name": "members_organization_id_idx",
"columns": [
"organization_id"
],
"isUnique": false
}
},
"foreignKeys": {
"members_user_id_users_id_fk": {
"name": "members_user_id_users_id_fk",
@@ -555,6 +615,22 @@
"notNull": false,
"autoincrement": false
},
"default_tax_rate": {
"name": "default_tax_rate",
"type": "real",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": 0
},
"default_currency": {
"name": "default_currency",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": "'USD'"
},
"created_at": {
"name": "created_at",
"type": "integer",
@@ -569,6 +645,147 @@
"uniqueConstraints": {},
"checkConstraints": {}
},
"passkey_challenges": {
"name": "passkey_challenges",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"challenge": {
"name": "challenge",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"user_id": {
"name": "user_id",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"expires_at": {
"name": "expires_at",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false
}
},
"indexes": {
"passkey_challenges_challenge_unique": {
"name": "passkey_challenges_challenge_unique",
"columns": [
"challenge"
],
"isUnique": true
}
},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
},
"passkeys": {
"name": "passkeys",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"user_id": {
"name": "user_id",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"public_key": {
"name": "public_key",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"counter": {
"name": "counter",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"device_type": {
"name": "device_type",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"backed_up": {
"name": "backed_up",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"transports": {
"name": "transports",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"last_used_at": {
"name": "last_used_at",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"created_at": {
"name": "created_at",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false
}
},
"indexes": {
"passkeys_user_id_idx": {
"name": "passkeys_user_id_idx",
"columns": [
"user_id"
],
"isUnique": false
}
},
"foreignKeys": {
"passkeys_user_id_users_id_fk": {
"name": "passkeys_user_id_users_id_fk",
"tableFrom": "passkeys",
"tableTo": "users",
"columnsFrom": [
"user_id"
],
"columnsTo": [
"id"
],
"onDelete": "no action",
"onUpdate": "no action"
}
},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
},
"sessions": {
"name": "sessions",
"columns": {
@@ -594,7 +811,15 @@
"autoincrement": false
}
},
"indexes": {},
"indexes": {
"sessions_user_id_idx": {
"name": "sessions_user_id_idx",
"columns": [
"user_id"
],
"isUnique": false
}
},
"foreignKeys": {
"sessions_user_id_users_id_fk": {
"name": "sessions_user_id_users_id_fk",
@@ -691,6 +916,14 @@
"notNull": false,
"autoincrement": false
},
"rate": {
"name": "rate",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": 0
},
"created_at": {
"name": "created_at",
"type": "integer",
@@ -699,7 +932,15 @@
"autoincrement": false
}
},
"indexes": {},
"indexes": {
"tags_organization_id_idx": {
"name": "tags_organization_id_idx",
"columns": [
"organization_id"
],
"isUnique": false
}
},
"foreignKeys": {
"tags_organization_id_organizations_id_fk": {
"name": "tags_organization_id_organizations_id_fk",
@@ -750,13 +991,6 @@
"notNull": true,
"autoincrement": false
},
"category_id": {
"name": "category_id",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"start_time": {
"name": "start_time",
"type": "integer",
@@ -778,6 +1012,13 @@
"notNull": false,
"autoincrement": false
},
"invoice_id": {
"name": "invoice_id",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"is_manual": {
"name": "is_manual",
"type": "integer",
@@ -794,7 +1035,43 @@
"autoincrement": false
}
},
"indexes": {},
"indexes": {
"time_entries_user_id_idx": {
"name": "time_entries_user_id_idx",
"columns": [
"user_id"
],
"isUnique": false
},
"time_entries_organization_id_idx": {
"name": "time_entries_organization_id_idx",
"columns": [
"organization_id"
],
"isUnique": false
},
"time_entries_client_id_idx": {
"name": "time_entries_client_id_idx",
"columns": [
"client_id"
],
"isUnique": false
},
"time_entries_start_time_idx": {
"name": "time_entries_start_time_idx",
"columns": [
"start_time"
],
"isUnique": false
},
"time_entries_invoice_id_idx": {
"name": "time_entries_invoice_id_idx",
"columns": [
"invoice_id"
],
"isUnique": false
}
},
"foreignKeys": {
"time_entries_user_id_users_id_fk": {
"name": "time_entries_user_id_users_id_fk",
@@ -834,19 +1111,6 @@
],
"onDelete": "no action",
"onUpdate": "no action"
},
"time_entries_category_id_categories_id_fk": {
"name": "time_entries_category_id_categories_id_fk",
"tableFrom": "time_entries",
"tableTo": "categories",
"columnsFrom": [
"category_id"
],
"columnsTo": [
"id"
],
"onDelete": "no action",
"onUpdate": "no action"
}
},
"compositePrimaryKeys": {},
@@ -871,7 +1135,22 @@
"autoincrement": false
}
},
"indexes": {},
"indexes": {
"time_entry_tags_time_entry_id_idx": {
"name": "time_entry_tags_time_entry_id_idx",
"columns": [
"time_entry_id"
],
"isUnique": false
},
"time_entry_tags_tag_id_idx": {
"name": "time_entry_tags_tag_id_idx",
"columns": [
"tag_id"
],
"isUnique": false
}
},
"foreignKeys": {
"time_entry_tags_time_entry_id_time_entries_id_fk": {
"name": "time_entry_tags_time_entry_id_time_entries_id_fk",

456
drizzle/meta/0001_snapshot.json
View File

@@ -1,8 +1,8 @@
{
"version": "6",
"dialect": "sqlite",
"id": "5483c77e-e742-4fbd-8494-d6f9c6c9e28a",
"prevId": "e1e0fee4-786a-4f9f-9ebe-659aae0a55be",
"id": "837a4e18-b319-465d-9e30-2614b4850fb5",
"prevId": "8343b003-264b-444a-9782-07d736dd3407",
"tables": {
"api_tokens": {
"name": "api_tokens",
@@ -65,6 +65,13 @@
"token"
],
"isUnique": true
},
"api_tokens_user_id_idx": {
"name": "api_tokens_user_id_idx",
"columns": [
"user_id"
],
"isUnique": false
}
},
"foreignKeys": {
@@ -86,65 +93,6 @@
"uniqueConstraints": {},
"checkConstraints": {}
},
"categories": {
"name": "categories",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"organization_id": {
"name": "organization_id",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"name": {
"name": "name",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"color": {
"name": "color",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"created_at": {
"name": "created_at",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false
}
},
"indexes": {},
"foreignKeys": {
"categories_organization_id_organizations_id_fk": {
"name": "categories_organization_id_organizations_id_fk",
"tableFrom": "categories",
"tableTo": "organizations",
"columnsFrom": [
"organization_id"
],
"columnsTo": [
"id"
],
"onDelete": "no action",
"onUpdate": "no action"
}
},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
},
"clients": {
"name": "clients",
"columns": {
@@ -226,7 +174,15 @@
"autoincrement": false
}
},
"indexes": {},
"indexes": {
"clients_organization_id_idx": {
"name": "clients_organization_id_idx",
"columns": [
"organization_id"
],
"isUnique": false
}
},
"foreignKeys": {
"clients_organization_id_organizations_id_fk": {
"name": "clients_organization_id_organizations_id_fk",
@@ -295,7 +251,15 @@
"default": 0
}
},
"indexes": {},
"indexes": {
"invoice_items_invoice_id_idx": {
"name": "invoice_items_invoice_id_idx",
"columns": [
"invoice_id"
],
"isUnique": false
}
},
"foreignKeys": {
"invoice_items_invoice_id_invoices_id_fk": {
"name": "invoice_items_invoice_id_invoices_id_fk",
@@ -399,6 +363,30 @@
"autoincrement": false,
"default": 0
},
"discount_value": {
"name": "discount_value",
"type": "real",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": 0
},
"discount_type": {
"name": "discount_type",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": "'percentage'"
},
"discount_amount": {
"name": "discount_amount",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": 0
},
"tax_rate": {
"name": "tax_rate",
"type": "real",
@@ -431,7 +419,22 @@
"autoincrement": false
}
},
"indexes": {},
"indexes": {
"invoices_organization_id_idx": {
"name": "invoices_organization_id_idx",
"columns": [
"organization_id"
],
"isUnique": false
},
"invoices_client_id_idx": {
"name": "invoices_client_id_idx",
"columns": [
"client_id"
],
"isUnique": false
}
},
"foreignKeys": {
"invoices_organization_id_organizations_id_fk": {
"name": "invoices_organization_id_organizations_id_fk",
@@ -497,7 +500,22 @@
"autoincrement": false
}
},
"indexes": {},
"indexes": {
"members_user_id_idx": {
"name": "members_user_id_idx",
"columns": [
"user_id"
],
"isUnique": false
},
"members_organization_id_idx": {
"name": "members_organization_id_idx",
"columns": [
"organization_id"
],
"isUnique": false
}
},
"foreignKeys": {
"members_user_id_users_id_fk": {
"name": "members_user_id_users_id_fk",
@@ -597,6 +615,22 @@
"notNull": false,
"autoincrement": false
},
"default_tax_rate": {
"name": "default_tax_rate",
"type": "real",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": 0
},
"default_currency": {
"name": "default_currency",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": "'USD'"
},
"created_at": {
"name": "created_at",
"type": "integer",
@@ -611,6 +645,147 @@
"uniqueConstraints": {},
"checkConstraints": {}
},
"passkey_challenges": {
"name": "passkey_challenges",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"challenge": {
"name": "challenge",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"user_id": {
"name": "user_id",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"expires_at": {
"name": "expires_at",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false
}
},
"indexes": {
"passkey_challenges_challenge_unique": {
"name": "passkey_challenges_challenge_unique",
"columns": [
"challenge"
],
"isUnique": true
}
},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
},
"passkeys": {
"name": "passkeys",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"user_id": {
"name": "user_id",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"public_key": {
"name": "public_key",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"counter": {
"name": "counter",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"device_type": {
"name": "device_type",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"backed_up": {
"name": "backed_up",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"transports": {
"name": "transports",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"last_used_at": {
"name": "last_used_at",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"created_at": {
"name": "created_at",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false
}
},
"indexes": {
"passkeys_user_id_idx": {
"name": "passkeys_user_id_idx",
"columns": [
"user_id"
],
"isUnique": false
}
},
"foreignKeys": {
"passkeys_user_id_users_id_fk": {
"name": "passkeys_user_id_users_id_fk",
"tableFrom": "passkeys",
"tableTo": "users",
"columnsFrom": [
"user_id"
],
"columnsTo": [
"id"
],
"onDelete": "no action",
"onUpdate": "no action"
}
},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
},
"sessions": {
"name": "sessions",
"columns": {
@@ -636,7 +811,15 @@
"autoincrement": false
}
},
"indexes": {},
"indexes": {
"sessions_user_id_idx": {
"name": "sessions_user_id_idx",
"columns": [
"user_id"
],
"isUnique": false
}
},
"foreignKeys": {
"sessions_user_id_users_id_fk": {
"name": "sessions_user_id_users_id_fk",
@@ -733,6 +916,14 @@
"notNull": false,
"autoincrement": false
},
"rate": {
"name": "rate",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": 0
},
"created_at": {
"name": "created_at",
"type": "integer",
@@ -741,7 +932,15 @@
"autoincrement": false
}
},
"indexes": {},
"indexes": {
"tags_organization_id_idx": {
"name": "tags_organization_id_idx",
"columns": [
"organization_id"
],
"isUnique": false
}
},
"foreignKeys": {
"tags_organization_id_organizations_id_fk": {
"name": "tags_organization_id_organizations_id_fk",
@@ -792,11 +991,11 @@
"notNull": true,
"autoincrement": false
},
"category_id": {
"name": "category_id",
"tag_id": {
"name": "tag_id",
"type": "text",
"primaryKey": false,
"notNull": true,
"notNull": false,
"autoincrement": false
},
"start_time": {
@@ -820,6 +1019,13 @@
"notNull": false,
"autoincrement": false
},
"invoice_id": {
"name": "invoice_id",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"is_manual": {
"name": "is_manual",
"type": "integer",
@@ -836,7 +1042,50 @@
"autoincrement": false
}
},
"indexes": {},
"indexes": {
"time_entries_user_id_idx": {
"name": "time_entries_user_id_idx",
"columns": [
"user_id"
],
"isUnique": false
},
"time_entries_organization_id_idx": {
"name": "time_entries_organization_id_idx",
"columns": [
"organization_id"
],
"isUnique": false
},
"time_entries_client_id_idx": {
"name": "time_entries_client_id_idx",
"columns": [
"client_id"
],
"isUnique": false
},
"time_entries_tag_id_idx": {
"name": "time_entries_tag_id_idx",
"columns": [
"tag_id"
],
"isUnique": false
},
"time_entries_start_time_idx": {
"name": "time_entries_start_time_idx",
"columns": [
"start_time"
],
"isUnique": false
},
"time_entries_invoice_id_idx": {
"name": "time_entries_invoice_id_idx",
"columns": [
"invoice_id"
],
"isUnique": false
}
},
"foreignKeys": {
"time_entries_user_id_users_id_fk": {
"name": "time_entries_user_id_users_id_fk",
@@ -877,60 +1126,9 @@
"onDelete": "no action",
"onUpdate": "no action"
},
"time_entries_category_id_categories_id_fk": {
"name": "time_entries_category_id_categories_id_fk",
"time_entries_tag_id_tags_id_fk": {
"name": "time_entries_tag_id_tags_id_fk",
"tableFrom": "time_entries",
"tableTo": "categories",
"columnsFrom": [
"category_id"
],
"columnsTo": [
"id"
],
"onDelete": "no action",
"onUpdate": "no action"
}
},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
},
"time_entry_tags": {
"name": "time_entry_tags",
"columns": {
"time_entry_id": {
"name": "time_entry_id",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"tag_id": {
"name": "tag_id",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
}
},
"indexes": {},
"foreignKeys": {
"time_entry_tags_time_entry_id_time_entries_id_fk": {
"name": "time_entry_tags_time_entry_id_time_entries_id_fk",
"tableFrom": "time_entry_tags",
"tableTo": "time_entries",
"columnsFrom": [
"time_entry_id"
],
"columnsTo": [
"id"
],
"onDelete": "no action",
"onUpdate": "no action"
},
"time_entry_tags_tag_id_tags_id_fk": {
"name": "time_entry_tags_tag_id_tags_id_fk",
"tableFrom": "time_entry_tags",
"tableTo": "tags",
"columnsFrom": [
"tag_id"
@@ -942,15 +1140,7 @@
"onUpdate": "no action"
}
},
"compositePrimaryKeys": {
"time_entry_tags_time_entry_id_tag_id_pk": {
"columns": [
"time_entry_id",
"tag_id"
],
"name": "time_entry_tags_time_entry_id_tag_id_pk"
}
},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
},

1150
drizzle/meta/0002_snapshot.json
View File

File diff suppressed because it is too large Load Diff

1174
drizzle/meta/0003_snapshot.json
View File

File diff suppressed because it is too large Load Diff

1315
drizzle/meta/0004_snapshot.json
View File

File diff suppressed because it is too large Load Diff

29
drizzle/meta/_journal.json
View File

@@ -5,36 +5,15 @@
{
"idx": 0,
"version": "6",
"when": 1768688193284,
"tag": "0000_motionless_king_cobra",
"when": 1768934194146,
"tag": "0000_lazy_rictor",
"breakpoints": true
},
{
"idx": 1,
"version": "6",
"when": 1768690333269,
"tag": "0001_lazy_roughhouse",
"breakpoints": true
},
{
"idx": 2,
"version": "6",
"when": 1768773436601,
"tag": "0002_chilly_cyclops",
"breakpoints": true
},
{
"idx": 3,
"version": "6",
"when": 1768842088321,
"tag": "0003_amusing_wendigo",
"breakpoints": true
},
{
"idx": 4,
"version": "6",
"when": 1768876902359,
"tag": "0004_happy_namorita",
"when": 1768935234392,
"tag": "0001_demonic_red_skull",
"breakpoints": true
}
]

18
package.json
View File

@@ -1,7 +1,7 @@
{
"name": "chronus",
"type": "module",
"version": "2.2.1",
"version": "2.4.0",
"scripts": {
"dev": "astro dev",
"build": "astro build",
@@ -12,32 +12,32 @@
"migrate": "node scripts/migrate.js"
},
"dependencies": {
"@astrojs/check": "^0.9.6",
"@astrojs/node": "^9.5.2",
"@astrojs/vue": "^5.1.4",
"@astrojs/check": "0.9.6",
"@astrojs/node": "10.0.0-beta.2",
"@astrojs/vue": "6.0.0-beta.0",
"@ceereals/vue-pdf": "^0.2.1",
"@iconify/vue": "^5.0.0",
"@libsql/client": "^0.17.0",
"@simplewebauthn/browser": "^13.2.2",
"@simplewebauthn/server": "^13.2.2",
"@tailwindcss/vite": "^4.1.18",
"astro": "^5.16.11",
"astro": "6.0.0-beta.9",
"astro-icon": "^1.1.5",
"bcryptjs": "^3.0.3",
"chart.js": "^4.5.1",
"daisyui": "^5.5.14",
"dotenv": "^17.2.3",
"daisyui": "^5.5.18",
"dotenv": "^17.2.4",
"drizzle-orm": "0.45.1",
"nanoid": "^5.1.6",
"tailwindcss": "^4.1.18",
"typescript": "^5.9.3",
"vue": "^3.5.27",
"vue": "^3.5.28",
"vue-chartjs": "^5.3.3"
},
"devDependencies": {
"@catppuccin/daisyui": "^2.1.1",
"@iconify-json/heroicons": "^1.2.3",
"@react-pdf/types": "^2.9.2",
"drizzle-kit": "0.31.8"
"drizzle-kit": "0.31.9"
}
}

1568
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

4
src/components/Avatar.astro
View File

@@ -9,7 +9,7 @@ const initial = name ? name.charAt(0).toUpperCase() : '?';
---
<div class:list={["avatar placeholder", className]}>
<div class="bg-primary text-primary-content w-10 rounded-full flex items-center justify-center">
<span class="text-lg font-semibold">{initial}</span>
<div class="bg-primary/15 text-primary w-9 h-9 rounded-full flex items-center justify-center">
<span class="text-sm font-semibold">{initial}</span>
</div>
</div>

64
src/components/CategoryChart.vue
View File

@@ -1,64 +0,0 @@
<template>
<div style="position: relative; height: 100%; width: 100%;">
<Doughnut :data="chartData" :options="chartOptions" />
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { Doughnut } from 'vue-chartjs';
import {
Chart as ChartJS,
ArcElement,
Tooltip,
Legend,
DoughnutController
} from 'chart.js';
ChartJS.register(ArcElement, Tooltip, Legend, DoughnutController);
interface CategoryData {
name: string;
totalTime: number;
color: string;
}
const props = defineProps<{
categories: CategoryData[];
}>();
const chartData = computed(() => ({
labels: props.categories.map(c => c.name),
datasets: [{
data: props.categories.map(c => c.totalTime),
backgroundColor: props.categories.map(c => c.color || '#3b82f6'),
borderWidth: 2,
borderColor: '#1e293b',
}]
}));
const chartOptions = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom' as const,
labels: {
color: '#e2e8f0',
padding: 15,
font: { size: 12 }
}
},
tooltip: {
callbacks: {
label: function(context: any) {
const minutes = Math.round(context.raw / (1000 * 60));
const hours = Math.floor(minutes / 60);
const mins = minutes % 60;
return ` ${context.label}: ${hours}h ${mins}m`;
}
}
}
}
};
</script>

96
src/components/ManualEntry.vue
View File

@@ -3,7 +3,6 @@ import { ref } from "vue";
const props = defineProps<{
clients: { id: string; name: string }[];
categories: { id: string; name: string; color: string | null }[];
tags: { id: string; name: string; color: string | null }[];
}>();
@@ -13,8 +12,7 @@ const emit = defineEmits<{
const description = ref("");
const selectedClientId = ref("");
const selectedCategoryId = ref("");
const selectedTags = ref<string[]>([]);
const selectedTagId = ref<string | null>(null);
const startDate = ref("");
const startTime = ref("");
const endDate = ref("");
@@ -28,11 +26,10 @@ startDate.value = today;
endDate.value = today;
function toggleTag(tagId: string) {
const index = selectedTags.value.indexOf(tagId);
if (index > -1) {
selectedTags.value.splice(index, 1);
if (selectedTagId.value === tagId) {
selectedTagId.value = null;
} else {
selectedTags.value.push(tagId);
selectedTagId.value = tagId;
}
}
@@ -53,10 +50,6 @@ function validateForm(): string | null {
return "Please select a client";
}
if (!selectedCategoryId.value) {
return "Please select a category";
}
if (!startDate.value || !startTime.value) {
return "Please enter start date and time";
}
@@ -101,10 +94,9 @@ async function submitManualEntry() {
body: JSON.stringify({
description: description.value,
clientId: selectedClientId.value,
categoryId: selectedCategoryId.value,
startTime: startDateTime,
endTime: endDateTime,
tags: selectedTags.value,
tagId: selectedTagId.value,
}),
});
@@ -119,8 +111,7 @@ async function submitManualEntry() {
description.value = "";
selectedClientId.value = "";
selectedCategoryId.value = "";
selectedTags.value = [];
selectedTagId.value = null;
startDate.value = today;
endDate.value = today;
startTime.value = "";
@@ -144,8 +135,7 @@ async function submitManualEntry() {
function clearForm() {
description.value = "";
selectedClientId.value = "";
selectedCategoryId.value = "";
selectedTags.value = [];
selectedTagId.value = null;
startDate.value = today;
endDate.value = today;
startTime.value = "";
@@ -208,59 +198,32 @@ function clearForm() {
<span>{{ error }}</span>
</div>
<!-- Client and Category Row -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Client Row -->
<div class="form-control">
<label class="label pb-2">
<span class="label-text font-medium">Client</span>
<span class="label-text-alt text-error">*</span>
<label class="label pb-2 font-medium" for="manual-client">
Client <span class="label-text-alt text-error">*</span>
</label>
<select
id="manual-client"
v-model="selectedClientId"
class="select select-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
:disabled="isSubmitting"
>
<option value="">Select a client...</option>
<option
v-for="client in clients"
:key="client.id"
:value="client.id"
>
<option v-for="client in clients" :key="client.id" :value="client.id">
{{ client.name }}
</option>
</select>
</div>
<div class="form-control">
<label class="label pb-2">
<span class="label-text font-medium">Category</span>
<span class="label-text-alt text-error">*</span>
</label>
<select
v-model="selectedCategoryId"
class="select select-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
:disabled="isSubmitting"
>
<option value="">Select a category...</option>
<option
v-for="category in categories"
:key="category.id"
:value="category.id"
>
{{ category.name }}
</option>
</select>
</div>
</div>
<!-- Start Date and Time -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="form-control">
<label class="label pb-2">
<span class="label-text font-medium">Start Date</span>
<span class="label-text-alt text-error">*</span>
<label class="label pb-2 font-medium" for="manual-start-date">
Start Date <span class="label-text-alt text-error">*</span>
</label>
<input
id="manual-start-date"
v-model="startDate"
type="date"
class="input input-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
@@ -269,11 +232,11 @@ function clearForm() {
</div>
<div class="form-control">
<label class="label pb-2">
<span class="label-text font-medium">Start Time</span>
<span class="label-text-alt text-error">*</span>
<label class="label pb-2 font-medium" for="manual-start-time">
Start Time <span class="label-text-alt text-error">*</span>
</label>
<input
id="manual-start-time"
v-model="startTime"
type="time"
class="input input-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
@@ -285,11 +248,11 @@ function clearForm() {
<!-- End Date and Time -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="form-control">
<label class="label pb-2">
<span class="label-text font-medium">End Date</span>
<span class="label-text-alt text-error">*</span>
<label class="label pb-2 font-medium" for="manual-end-date">
End Date <span class="label-text-alt text-error">*</span>
</label>
<input
id="manual-end-date"
v-model="endDate"
type="date"
class="input input-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
@@ -298,11 +261,11 @@ function clearForm() {
</div>
<div class="form-control">
<label class="label pb-2">
<span class="label-text font-medium">End Time</span>
<span class="label-text-alt text-error">*</span>
<label class="label pb-2 font-medium" for="manual-end-time">
End Time <span class="label-text-alt text-error">*</span>
</label>
<input
id="manual-end-time"
v-model="endTime"
type="time"
class="input input-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
@@ -313,10 +276,11 @@ function clearForm() {
<!-- Description Row -->
<div class="form-control">
<label class="label pb-2">
<span class="label-text font-medium">Description</span>
<label class="label pb-2 font-medium" for="manual-description">
Description
</label>
<input
id="manual-description"
v-model="description"
type="text"
placeholder="What did you work on?"
@@ -327,9 +291,7 @@ function clearForm() {
<!-- Tags Section -->
<div v-if="tags.length > 0" class="form-control">
<label class="label pb-2">
<span class="label-text font-medium">Tags</span>
</label>
<label class="label pb-2 font-medium" for="manual-tags"> Tags </label>
<div class="flex flex-wrap gap-2">
<button
v-for="tag in tags"
@@ -337,7 +299,7 @@ function clearForm() {
@click="toggleTag(tag.id)"
:class="[
'badge badge-lg cursor-pointer transition-all hover:scale-105',
selectedTags.includes(tag.id)
selectedTagId === tag.id
? 'badge-primary shadow-lg shadow-primary/20'
: 'badge-outline hover:bg-base-300/50',
]"

29
src/components/StatCard.astro Normal file
View File

@@ -0,0 +1,29 @@
---
import { Icon } from 'astro-icon/components';
interface Props {
title: string;
value: string;
description?: string;
icon?: string;
color?: string;
valueClass?: string;
}
const { title, value, description, icon, color = 'text-primary', valueClass } = Astro.props;
---
<div class="card card-border bg-base-100">
<div class="card-body p-4 gap-1">
<div class="flex items-center justify-between">
<span class="text-xs font-medium uppercase tracking-wider text-base-content/60">{title}</span>
{icon && (
<div class:list={[color, "opacity-40"]}>
<Icon name={icon} class="w-5 h-5" />
</div>
)}
</div>
<div class:list={["text-2xl font-bold", color, valueClass]}>{value}</div>
{description && <div class="text-xs text-base-content/50">{description}</div>}
</div>
</div>

67
src/components/TagChart.vue Normal file
View File

@@ -0,0 +1,67 @@
<template>
<div style="position: relative; height: 100%; width: 100%">
<Doughnut :data="chartData" :options="chartOptions" />
</div>
</template>
<script setup lang="ts">
import { computed } from "vue";
import { Doughnut } from "vue-chartjs";
import {
Chart as ChartJS,
ArcElement,
Tooltip,
Legend,
type ChartOptions,
} from "chart.js";
ChartJS.register(ArcElement, Tooltip, Legend);
interface TagData {
name: string;
totalTime: number;
color: string;
}
const props = defineProps<{
tags: TagData[];
}>();
const chartData = computed(() => ({
labels: props.tags.map((t) => t.name),
datasets: [
{
data: props.tags.map((t) => t.totalTime / (1000 * 60)), // Convert to minutes
backgroundColor: props.tags.map((t) => t.color),
borderColor: "#1e293b", // Matches typical dark mode bg
borderWidth: 2,
},
],
}));
const chartOptions: ChartOptions<"doughnut"> = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: "right",
labels: {
color: "#e2e8f0",
usePointStyle: true,
padding: 20,
},
},
tooltip: {
callbacks: {
label: function (context) {
const minutes = Math.round(context.raw as number);
const hours = Math.floor(minutes / 60);
const mins = minutes % 60;
return ` ${hours}h ${mins}m`;
},
},
},
},
cutout: "70%",
};
</script>

34
src/components/ThemeToggle.vue Normal file
View File

@@ -0,0 +1,34 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Icon } from '@iconify/vue';
const theme = ref('macchiato');
onMounted(() => {
const stored = localStorage.getItem('theme');
if (stored) {
theme.value = stored;
document.documentElement.setAttribute('data-theme', stored);
}
});
function toggleTheme() {
const newTheme = theme.value === 'macchiato' ? 'latte' : 'macchiato';
theme.value = newTheme;
document.documentElement.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
}
</script>
<template>
<button
@click="toggleTheme"
class="btn btn-ghost btn-circle"
aria-label="Toggle Theme"
>
<Icon
:icon="theme === 'macchiato' ? 'heroicons:moon' : 'heroicons:sun'"
class="w-5 h-5"
/>
</button>
</template>

72
src/components/Timer.vue
View File

@@ -7,10 +7,9 @@ const props = defineProps<{
startTime: number;
description: string | null;
clientId: string;
categoryId: string;
tagId?: string;
} | null;
clients: { id: string; name: string }[];
categories: { id: string; name: string; color: string | null }[];
tags: { id: string; name: string; color: string | null }[];
}>();
@@ -19,8 +18,7 @@ const startTime = ref<number | null>(null);
const elapsedTime = ref(0);
const description = ref("");
const selectedClientId = ref("");
const selectedCategoryId = ref("");
const selectedTags = ref<string[]>([]);
const selectedTagId = ref<string | null>(null);
let interval: ReturnType<typeof setInterval> | null = null;
function formatTime(ms: number) {
@@ -49,11 +47,10 @@ function formatTime(ms: number) {
}
function toggleTag(tagId: string) {
const index = selectedTags.value.indexOf(tagId);
if (index > -1) {
selectedTags.value.splice(index, 1);
if (selectedTagId.value === tagId) {
selectedTagId.value = null;
} else {
selectedTags.value.push(tagId);
selectedTagId.value = tagId;
}
}
@@ -63,7 +60,7 @@ onMounted(() => {
startTime.value = props.initialRunningEntry.startTime;
description.value = props.initialRunningEntry.description || "";
selectedClientId.value = props.initialRunningEntry.clientId;
selectedCategoryId.value = props.initialRunningEntry.categoryId;
selectedTagId.value = props.initialRunningEntry.tagId || null;
elapsedTime.value = Date.now() - startTime.value;
interval = setInterval(() => {
elapsedTime.value = Date.now() - startTime.value!;
@@ -81,19 +78,13 @@ async function startTimer() {
return;
}
if (!selectedCategoryId.value) {
alert("Please select a category");
return;
}
const res = await fetch("/api/time-entries/start", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
description: description.value,
clientId: selectedClientId.value,
categoryId: selectedCategoryId.value,
tags: selectedTags.value,
tagId: selectedTagId.value,
}),
});
@@ -119,8 +110,7 @@ async function stopTimer() {
startTime.value = null;
description.value = "";
selectedClientId.value = "";
selectedCategoryId.value = "";
selectedTags.value = [];
selectedTagId.value = null;
window.location.reload();
}
}
@@ -131,55 +121,31 @@ async function stopTimer() {
class="card bg-base-200/50 backdrop-blur-sm shadow-lg border border-base-300/50 mb-6 hover:border-base-300 transition-all duration-200"
>
<div class="card-body gap-6">
<!-- Client and Description Row -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Client Row -->
<div class="form-control">
<label class="label pb-2">
<span class="label-text font-medium">Client</span>
<label class="label pb-2 font-medium" for="timer-client">
Client
</label>
<select
id="timer-client"
v-model="selectedClientId"
class="select select-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
:disabled="isRunning"
>
<option value="">Select a client...</option>
<option
v-for="client in clients"
:key="client.id"
:value="client.id"
>
<option v-for="client in clients" :key="client.id" :value="client.id">
{{ client.name }}
</option>
</select>
</div>
<div class="form-control">
<label class="label pb-2">
<span class="label-text font-medium">Category</span>
</label>
<select
v-model="selectedCategoryId"
class="select select-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
:disabled="isRunning"
>
<option value="">Select a category...</option>
<option
v-for="category in categories"
:key="category.id"
:value="category.id"
>
{{ category.name }}
</option>
</select>
</div>
</div>
<!-- Description Row -->
<div class="form-control">
<label class="label pb-2">
<span class="label-text font-medium">Description</span>
<label class="label pb-2 font-medium" for="timer-description">
Description
</label>
<input
id="timer-description"
v-model="description"
type="text"
placeholder="What are you working on?"
@@ -190,9 +156,7 @@ async function stopTimer() {
<!-- Tags Section -->
<div v-if="tags.length > 0" class="form-control">
<label class="label pb-2">
<span class="label-text font-medium">Tags</span>
</label>
<label class="label pb-2 font-medium" for="timer-tags"> Tags </label>
<div class="flex flex-wrap gap-2">
<button
v-for="tag in tags"
@@ -200,7 +164,7 @@ async function stopTimer() {
@click="toggleTag(tag.id)"
:class="[
'badge badge-lg cursor-pointer transition-all hover:scale-105',
selectedTags.includes(tag.id)
selectedTagId === tag.id
? 'badge-primary shadow-lg shadow-primary/20'
: 'badge-outline hover:bg-base-300/50',
]"

5
src/components/settings/ApiTokenManager.vue
View File

@@ -182,11 +182,12 @@ function closeShowTokenModal() {
<form @submit.prevent="createToken" class="space-y-4">
<div class="form-control">
<label class="label pb-2">
<span class="label-text font-medium">Token Name</span>
<label class="label pb-2 font-medium" for="token-name">
Token Name
</label>
<input
type="text"
id="token-name"
v-model="newTokenName"
placeholder="e.g. CI/CD Pipeline"
class="input input-bordered w-full"

100
src/components/settings/PasswordForm.vue
View File

@@ -1,21 +1,24 @@
<script setup lang="ts">
import { ref } from 'vue';
import { Icon } from '@iconify/vue';
import { ref } from "vue";
import { Icon } from "@iconify/vue";
const currentPassword = ref('');
const newPassword = ref('');
const confirmPassword = ref('');
const currentPassword = ref("");
const newPassword = ref("");
const confirmPassword = ref("");
const loading = ref(false);
const message = ref<{ type: 'success' | 'error'; text: string } | null>(null);
const message = ref<{ type: "success" | "error"; text: string } | null>(null);
async function changePassword() {
if (newPassword.value !== confirmPassword.value) {
message.value = { type: 'error', text: 'New passwords do not match' };
message.value = { type: "error", text: "New passwords do not match" };
return;
}
if (newPassword.value.length < 8) {
message.value = { type: 'error', text: 'Password must be at least 8 characters' };
message.value = {
type: "error",
text: "Password must be at least 8 characters",
};
return;
}
@@ -23,10 +26,10 @@ async function changePassword() {
message.value = null;
try {
const response = await fetch('/api/user/change-password', {
method: 'POST',
const response = await fetch("/api/user/change-password", {
method: "POST",
headers: {
'Content-Type': 'application/json',
"Content-Type": "application/json",
},
body: JSON.stringify({
currentPassword: currentPassword.value,
@@ -36,20 +39,26 @@ async function changePassword() {
});
if (response.ok) {
message.value = { type: 'success', text: 'Password changed successfully!' };
currentPassword.value = '';
newPassword.value = '';
confirmPassword.value = '';
message.value = {
type: "success",
text: "Password changed successfully!",
};
currentPassword.value = "";
newPassword.value = "";
confirmPassword.value = "";
setTimeout(() => {
message.value = null;
}, 3000);
} else {
const data = await response.json().catch(() => ({}));
message.value = { type: 'error', text: data.error || 'Failed to change password' };
message.value = {
type: "error",
text: data.error || "Failed to change password",
};
}
} catch (error) {
message.value = { type: 'error', text: 'An error occurred' };
message.value = { type: "error", text: "An error occurred" };
} finally {
loading.value = false;
}
@@ -59,8 +68,21 @@ async function changePassword() {
<template>
<div>
<!-- Success/Error Message Display -->
<div v-if="message" :class="['alert mb-6', message.type === 'success' ? 'alert-success' : 'alert-error']">
<Icon :icon="message.type === 'success' ? 'heroicons:check-circle' : 'heroicons:exclamation-circle'" class="w-6 h-6 shrink-0" />
<div
v-if="message"
:class="[
'alert mb-6',
message.type === 'success' ? 'alert-success' : 'alert-error',
]"
>
<Icon
:icon="
message.type === 'success'
? 'heroicons:check-circle'
: 'heroicons:exclamation-circle'
"
class="w-6 h-6 shrink-0"
/>
<span>{{ message.text }}</span>
</div>
@@ -73,11 +95,15 @@ async function changePassword() {
<form @submit.prevent="changePassword" class="space-y-5">
<div class="form-control">
<label class="label pb-2">
<span class="label-text font-medium text-sm sm:text-base">Current Password</span>
<label
class="label pb-2 font-medium text-sm sm:text-base"
for="current-password"
>
Current Password
</label>
<input
type="password"
id="current-password"
v-model="currentPassword"
placeholder="Enter current password"
class="input input-bordered w-full"
@@ -86,11 +112,15 @@ async function changePassword() {
</div>
<div class="form-control">
<label class="label pb-2">
<span class="label-text font-medium text-sm sm:text-base">New Password</span>
<label
class="label pb-2 font-medium text-sm sm:text-base"
for="new-password"
>
New Password
</label>
<input
type="password"
id="new-password"
v-model="newPassword"
placeholder="Enter new password"
class="input input-bordered w-full"
@@ -98,16 +128,23 @@ async function changePassword() {
minlength="8"
/>
<div class="label pt-2">
<span class="label-text-alt text-base-content/60 text-xs sm:text-sm">Minimum 8 characters</span>
<span
class="label-text-alt text-base-content/60 text-xs sm:text-sm"
>Minimum 8 characters</span
>
</div>
</div>
<div class="form-control">
<label class="label pb-2">
<span class="label-text font-medium text-sm sm:text-base">Confirm New Password</span>
<label
class="label pb-2 font-medium text-sm sm:text-base"
for="confirm-password"
>
Confirm New Password
</label>
<input
type="password"
id="confirm-password"
v-model="confirmPassword"
placeholder="Confirm new password"
class="input input-bordered w-full"
@@ -117,8 +154,15 @@ async function changePassword() {
</div>
<div class="flex justify-end pt-4">
<button type="submit" class="btn btn-primary w-full sm:w-auto" :disabled="loading">
<span v-if="loading" class="loading loading-spinner loading-sm"></span>
<button
type="submit"
class="btn btn-primary w-full sm:w-auto"
:disabled="loading"
>
<span
v-if="loading"
class="loading loading-spinner loading-sm"
></span>
<Icon v-else icon="heroicons:lock-closed" class="w-5 h-5" />
Update Password
</button>

16
src/components/settings/ProfileForm.vue
View File

@@ -80,13 +80,15 @@ async function updateProfile() {
<form @submit.prevent="updateProfile" class="space-y-5">
<div class="form-control">
<label class="label pb-2">
<span class="label-text font-medium text-sm sm:text-base"
>Full Name</span
<label
class="label pb-2 font-medium text-sm sm:text-base"
for="profile-name"
>
Full Name
</label>
<input
type="text"
id="profile-name"
v-model="name"
placeholder="Your full name"
class="input input-bordered w-full"
@@ -95,13 +97,15 @@ async function updateProfile() {
</div>
<div class="form-control">
<label class="label pb-2">
<span class="label-text font-medium text-sm sm:text-base"
>Email</span
<label
class="label pb-2 font-medium text-sm sm:text-base"
for="profile-email"
>
Email
</label>
<input
type="email"
id="profile-email"
:value="props.user.email"
class="input input-bordered w-full"
disabled

67
src/db/schema.ts
View File

@@ -33,6 +33,8 @@ export const organizations = sqliteTable("organizations", {
state: text("state"),
zip: text("zip"),
country: text("country"),
defaultTaxRate: real("default_tax_rate").default(0),
defaultCurrency: text("default_currency").default("USD"),
createdAt: integer("created_at", { mode: "timestamp" }).$defaultFn(
() => new Date(),
),
@@ -95,8 +97,8 @@ export const clients = sqliteTable(
}),
);
export const categories = sqliteTable(
"categories",
export const tags = sqliteTable(
"tags",
{
id: text("id")
.primaryKey()
@@ -104,6 +106,7 @@ export const categories = sqliteTable(
organizationId: text("organization_id").notNull(),
name: text("name").notNull(),
color: text("color"),
rate: integer("rate").default(0),
createdAt: integer("created_at", { mode: "timestamp" }).$defaultFn(
() => new Date(),
),
@@ -113,7 +116,7 @@ export const categories = sqliteTable(
columns: [table.organizationId],
foreignColumns: [organizations.id],
}),
organizationIdIdx: index("categories_organization_id_idx").on(
organizationIdIdx: index("tags_organization_id_idx").on(
table.organizationId,
),
}),
@@ -128,10 +131,11 @@ export const timeEntries = sqliteTable(
userId: text("user_id").notNull(),
organizationId: text("organization_id").notNull(),
clientId: text("client_id").notNull(),
categoryId: text("category_id").notNull(),
tagId: text("tag_id"),
startTime: integer("start_time", { mode: "timestamp" }).notNull(),
endTime: integer("end_time", { mode: "timestamp" }),
description: text("description"),
invoiceId: text("invoice_id"),
isManual: integer("is_manual", { mode: "boolean" }).default(false),
createdAt: integer("created_at", { mode: "timestamp" }).$defaultFn(
() => new Date(),
@@ -150,63 +154,18 @@ export const timeEntries = sqliteTable(
columns: [table.clientId],
foreignColumns: [clients.id],
}),
categoryFk: foreignKey({
columns: [table.categoryId],
foreignColumns: [categories.id],
tagFk: foreignKey({
columns: [table.tagId],
foreignColumns: [tags.id],
}),
userIdIdx: index("time_entries_user_id_idx").on(table.userId),
organizationIdIdx: index("time_entries_organization_id_idx").on(
table.organizationId,
),
clientIdIdx: index("time_entries_client_id_idx").on(table.clientId),
tagIdIdx: index("time_entries_tag_id_idx").on(table.tagId),
startTimeIdx: index("time_entries_start_time_idx").on(table.startTime),
}),
);
export const tags = sqliteTable(
"tags",
{
id: text("id")
.primaryKey()
.$defaultFn(() => nanoid()),
organizationId: text("organization_id").notNull(),
name: text("name").notNull(),
color: text("color"),
createdAt: integer("created_at", { mode: "timestamp" }).$defaultFn(
() => new Date(),
),
},
(table: any) => ({
orgFk: foreignKey({
columns: [table.organizationId],
foreignColumns: [organizations.id],
}),
organizationIdIdx: index("tags_organization_id_idx").on(
table.organizationId,
),
}),
);
export const timeEntryTags = sqliteTable(
"time_entry_tags",
{
timeEntryId: text("time_entry_id").notNull(),
tagId: text("tag_id").notNull(),
},
(table: any) => ({
pk: primaryKey({ columns: [table.timeEntryId, table.tagId] }),
timeEntryFk: foreignKey({
columns: [table.timeEntryId],
foreignColumns: [timeEntries.id],
}),
tagFk: foreignKey({
columns: [table.tagId],
foreignColumns: [tags.id],
}),
timeEntryIdIdx: index("time_entry_tags_time_entry_id_idx").on(
table.timeEntryId,
),
tagIdIdx: index("time_entry_tags_tag_id_idx").on(table.tagId),
invoiceIdIdx: index("time_entries_invoice_id_idx").on(table.invoiceId),
}),
);

197
src/layouts/DashboardLayout.astro
View File

@@ -5,6 +5,7 @@ import { db } from '../db';
import { members, organizations } from '../db/schema';
import { eq } from 'drizzle-orm';
import Avatar from '../components/Avatar.astro';
import ThemeToggle from '../components/ThemeToggle.vue';
import { ClientRouter } from "astro:transitions";
interface Props {
@@ -29,10 +30,24 @@ const userMemberships = await db.select({
const currentTeamId = Astro.cookies.get('currentTeamId')?.value || userMemberships[0]?.organization.id;
const currentTeam = userMemberships.find(m => m.organization.id === currentTeamId);
const navItems = [
{ href: '/dashboard', label: 'Dashboard', icon: 'heroicons:home', exact: true },
{ href: '/dashboard/tracker', label: 'Time Tracker', icon: 'heroicons:clock' },
{ href: '/dashboard/invoices', label: 'Invoices & Quotes', icon: 'heroicons:document-currency-dollar' },
{ href: '/dashboard/reports', label: 'Reports', icon: 'heroicons:chart-bar' },
{ href: '/dashboard/clients', label: 'Clients', icon: 'heroicons:building-office' },
{ href: '/dashboard/team', label: 'Team', icon: 'heroicons:user-group' },
];
function isActive(item: { href: string; exact?: boolean }) {
if (item.exact) return Astro.url.pathname === item.href;
return Astro.url.pathname.startsWith(item.href);
}
---
<!doctype html>
<html lang="en" data-theme="dark">
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Chronus Dashboard" />
@@ -41,47 +56,55 @@ const currentTeam = userMemberships.find(m => m.organization.id === currentTeamI
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<ClientRouter />
<script is:inline>
const theme = localStorage.getItem('theme') || 'macchiato';
document.documentElement.setAttribute('data-theme', theme);
</script>
</head>
<body class="bg-base-100 h-screen flex flex-col overflow-hidden">
<div class="drawer lg:drawer-open flex-1 overflow-auto">
<input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
<div class="drawer-content flex flex-col h-full overflow-auto">
<!-- Navbar -->
<div class="navbar bg-base-200/50 backdrop-blur-sm sticky top-0 z-50 lg:hidden border-b border-base-300/50">
<div class="flex-none lg:hidden">
<label for="my-drawer-2" aria-label="open sidebar" class="btn btn-square btn-ghost">
<Icon name="heroicons:bars-3" class="w-6 h-6" />
<!-- Mobile Navbar -->
<div class="navbar bg-base-100 sticky top-0 z-50 lg:hidden border-b border-base-200">
<div class="flex-none">
<label for="my-drawer-2" aria-label="open sidebar" class="btn btn-square btn-ghost btn-sm">
<Icon name="heroicons:bars-3" class="w-5 h-5" />
</label>
</div>
<div class="flex-1 px-2 flex items-center gap-2">
<img src="/logo.webp" alt="Chronus" class="h-8 w-8" />
<span class="text-xl font-bold text-primary">Chronus</span>
<img src="/logo.webp" alt="Chronus" class="h-7 w-7" />
<span class="text-lg font-bold text-primary">Chronus</span>
</div>
<div class="flex-none">
<ThemeToggle client:load />
</div>
</div>
<!-- Page content here -->
<main class="p-6 md:p-8">
<!-- Page content -->
<main class="flex-1 p-4 sm:p-6 lg:p-8">
<slot />
</main>
</div>
<div class="drawer-side z-50">
<label for="my-drawer-2" aria-label="close sidebar" class="drawer-overlay"></label>
<ul class="menu bg-base-200/95 backdrop-blur-sm min-h-full w-80 p-4 border-r border-base-300/30">
<!-- Sidebar content here -->
<li class="mb-6">
<a href="/dashboard" class="flex items-center gap-3 text-2xl font-bold text-primary hover:bg-transparent">
<img src="/logo.webp" alt="Chronus" class="h-10 w-10" />
Chronus
<aside class="bg-base-200 min-h-full w-72 flex flex-col border-r border-base-300/40">
<!-- Logo -->
<div class="px-5 pt-5 pb-3">
<a href="/dashboard" class="flex items-center gap-2.5 group">
<img src="/logo.webp" alt="Chronus" class="h-8 w-8" />
<span class="text-xl font-bold text-primary">Chronus</span>
</a>
</li>
</div>
{/* Team Switcher */}
<!-- Team Switcher -->
{userMemberships.length > 0 && (
<li class="mb-4">
<div class="form-control">
<div class="px-4 pb-2">
<select
class="select select-bordered w-full font-semibold bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary focus:outline-none focus:outline-offset-0 transition-all duration-200 hover:border-primary/40 focus:ring-3 focus:ring-primary/15 [&>option]:bg-base-300 [&>option]:text-base-content [&>option]:p-2"
class="select select-sm w-full bg-base-300/40 border-base-300/60 focus:border-primary/50 focus:outline-none text-sm font-medium"
id="team-switcher"
aria-label="Switch team"
onchange="document.cookie = 'currentTeamId=' + this.value + '; path=/'; window.location.reload();"
>
{userMemberships.map(({ membership, organization }) => (
@@ -94,99 +117,85 @@ const currentTeam = userMemberships.find(m => m.organization.id === currentTeamI
))}
</select>
</div>
</li>
)}
{userMemberships.length === 0 && (
<li class="mb-4">
<a href="/dashboard/organizations/new" class="btn btn-primary btn-sm">
<div class="px-4 pb-2">
<a href="/dashboard/organizations/new" class="btn btn-primary btn-sm btn-block">
<Icon name="heroicons:plus" class="w-4 h-4" />
Create Team
</a>
</li>
</div>
)}
<div class="divider my-2"></div>
<div class="divider my-1 mx-4"></div>
<li><a href="/dashboard" class:list={[
"hover:bg-base-300/50 rounded-lg transition-colors active:bg-base-300/50!",
{ "bg-primary/10 text-primary relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-0.75 before:h-[70%] before:bg-primary before:rounded-r-full": Astro.url.pathname === "/dashboard" }
<!-- Navigation -->
<nav class="flex-1 px-3">
<ul class="menu menu-sm gap-0.5 p-0">
{navItems.map(item => (
<li>
<a href={item.href} class:list={[
"rounded-lg gap-3 px-3 py-2.5 font-medium text-sm",
isActive(item)
? "bg-primary/10 text-primary"
: "text-base-content/70 hover:text-base-content hover:bg-base-300/50"
]}>
<Icon name="heroicons:home" class="w-5 h-5" />
Dashboard
</a></li>
<li><a href="/dashboard/tracker" class:list={[
"hover:bg-base-300/50 rounded-lg transition-colors active:bg-base-300/50!",
{ "bg-primary/10 text-primary relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-0.75 before:h-[70%] before:bg-primary before:rounded-r-full": Astro.url.pathname.startsWith("/dashboard/tracker") }
]}>
<Icon name="heroicons:clock" class="w-5 h-5" />
Time Tracker
</a></li>
<li><a href="/dashboard/invoices" class:list={[
"hover:bg-base-300/50 rounded-lg transition-colors active:bg-base-300/50!",
{ "bg-primary/10 text-primary relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-0.75 before:h-[70%] before:bg-primary before:rounded-r-full": Astro.url.pathname.startsWith("/dashboard/invoices") }
]}>
<Icon name="heroicons:document-currency-dollar" class="w-5 h-5" />
Invoices & Quotes
</a></li>
<li><a href="/dashboard/reports" class:list={[
"hover:bg-base-300/50 rounded-lg transition-colors active:bg-base-300/50!",
{ "bg-primary/10 text-primary relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-0.75 before:h-[70%] before:bg-primary before:rounded-r-full": Astro.url.pathname.startsWith("/dashboard/reports") }
]}>
<Icon name="heroicons:chart-bar" class="w-5 h-5" />
Reports
</a></li>
<li><a href="/dashboard/clients" class:list={[
"hover:bg-base-300/50 rounded-lg transition-colors active:bg-base-300/50!",
{ "bg-primary/10 text-primary relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-0.75 before:h-[70%] before:bg-primary before:rounded-r-full": Astro.url.pathname.startsWith("/dashboard/clients") }
]}>
<Icon name="heroicons:building-office" class="w-5 h-5" />
Clients
</a></li>
<li><a href="/dashboard/team" class:list={[
"hover:bg-base-300/50 rounded-lg transition-colors active:bg-base-300/50!",
{ "bg-primary/10 text-primary relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-0.75 before:h-[70%] before:bg-primary before:rounded-r-full": Astro.url.pathname.startsWith("/dashboard/team") }
]}>
<Icon name="heroicons:user-group" class="w-5 h-5" />
Team
</a></li>
<Icon name={item.icon} class="w-[18px] h-[18px]" />
{item.label}
</a>
</li>
))}
</ul>
{user.isSiteAdmin && (
<>
<div class="divider my-2"></div>
<li><a href="/admin" class:list={[
"font-semibold hover:bg-base-300/50 rounded-lg transition-colors active:bg-base-300/50!",
{ "bg-primary/10 text-primary relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-0.75 before:h-[70%] before:bg-primary before:rounded-r-full": Astro.url.pathname.startsWith("/admin") }
]}>
<Icon name="heroicons:cog-6-tooth" class="w-5 h-5" />
Site Admin
</a></li>
</>
)}
<div class="divider my-2"></div>
<div class="divider my-1"></div>
<ul class="menu menu-sm p-0">
<li>
<a href="/dashboard/settings" class="flex items-center gap-3 bg-base-300/30 hover:bg-base-300/60 rounded-lg p-3 transition-colors">
<Avatar name={user.name} />
<div class="flex-1 min-w-0">
<div class="font-semibold text-sm truncate">{user.name}</div>
<div class="text-xs text-base-content/50 truncate">{user.email}</div>
</div>
<Icon name="heroicons:chevron-right" class="w-4 h-4 opacity-40" />
<a href="/admin" class:list={[
"rounded-lg gap-3 px-3 py-2.5 font-medium text-sm",
Astro.url.pathname.startsWith("/admin")
? "bg-primary/10 text-primary"
: "text-base-content/70 hover:text-base-content hover:bg-base-300/50"
]}>
<Icon name="heroicons:cog-6-tooth" class="w-[18px] h-[18px]" />
Site Admin
</a>
</li>
</ul>
</>
)}
</nav>
<li>
<form action="/api/auth/logout" method="POST" class="contents">
<button type="submit" class="flex w-full items-center gap-2 py-2 px-4 text-error hover:bg-error/10 rounded-lg transition-colors active:bg-base-300/50!">
<Icon name="heroicons:arrow-right-on-rectangle" class="w-5 h-5" />
<!-- Bottom Section -->
<div class="mt-auto border-t border-base-300/40">
<div class="p-3">
<a href="/dashboard/settings" class="flex items-center gap-3 rounded-lg p-2.5 hover:bg-base-300/40 group">
<Avatar name={user.name} />
<div class="flex-1 min-w-0">
<div class="font-medium text-sm truncate">{user.name}</div>
<div class="text-xs text-base-content/50 truncate">{user.email}</div>
</div>
<Icon name="heroicons:chevron-right" class="w-4 h-4 text-base-content/30 group-hover:text-base-content/50" />
</a>
</div>
<div class="flex items-center justify-between px-5 pb-2">
<span class="text-xs text-base-content/40 font-medium">Theme</span>
<ThemeToggle client:load />
</div>
<div class="px-3 pb-3">
<form action="/api/auth/logout" method="POST">
<button type="submit" class="btn btn-ghost btn-sm btn-block justify-start gap-2 text-base-content/60 hover:text-error hover:bg-error/10 font-medium">
<Icon name="heroicons:arrow-right-on-rectangle" class="w-[18px] h-[18px]" />
Logout
</button>
</form>
</li>
</ul>
</div>
</div>
</aside>
</div>
</div>
</body>

6
src/layouts/Layout.astro
View File

@@ -10,7 +10,7 @@ const { title } = Astro.props;
---
<!doctype html>
<html lang="en" data-theme="dark">
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Chronus Time Tracking" />
@@ -19,6 +19,10 @@ const { title } = Astro.props;
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<ClientRouter />
<script is:inline>
const theme = localStorage.getItem('theme') || 'macchiato';
document.documentElement.setAttribute('data-theme', theme);
</script>
</head>
<body class="min-h-screen bg-base-100 text-base-content flex flex-col">
<div class="flex-1 flex flex-col">

13
src/lib/formatTime.ts
View File

@@ -25,3 +25,16 @@ export function formatTimeRange(start: Date, end: Date | null): string {
const ms = end.getTime() - start.getTime();
return formatDuration(ms);
}
/**
* Formats a cent-based amount as a currency string.
* @param amount - Amount in cents (e.g. 1500 = $15.00)
* @param currency - ISO 4217 currency code (default: 'USD')
* @returns Formatted currency string like "$15.00"
*/
export function formatCurrency(amount: number, currency: string = "USD"): string {
return new Intl.NumberFormat("en-US", {
style: "currency",
currency: currency,
}).format(amount / 100);
}

24
src/lib/getCurrentTeam.ts Normal file
View File

@@ -0,0 +1,24 @@
import { db } from '../db';
import { members } from '../db/schema';
import { eq } from 'drizzle-orm';
type User = { id: string; [key: string]: any };
/**
* Get the current team membership for a user based on the currentTeamId cookie.
* Returns the membership row, or null if the user has no memberships.
*/
export async function getCurrentTeam(user: User, currentTeamId?: string | null) {
const userMemberships = await db.select()
.from(members)
.where(eq(members.userId, user.id))
.all();
if (userMemberships.length === 0) return null;
const membership = currentTeamId
? userMemberships.find(m => m.organizationId === currentTeamId) || userMemberships[0]
: userMemberships[0];
return membership;
}

77
src/lib/validation.ts
View File

@@ -1,63 +1,66 @@
import { db } from "../db";
import { clients, categories, tags as tagsTable } from "../db/schema";
import { eq, and, inArray } from "drizzle-orm";
import { clients, tags as tagsTable } from "../db/schema";
import { eq, and } from "drizzle-orm";
export const MAX_LENGTHS = {
name: 255,
email: 320,
password: 128,
phone: 50,
address: 255, // street, city, state, zip, country
currency: 10,
invoiceNumber: 50,
invoiceNotes: 5000,
itemDescription: 2000,
description: 2000, // time entry description
} as const;
export function exceedsLength(
field: string,
value: string | null | undefined,
maxLength: number,
): string | null {
if (value && value.length > maxLength) {
return `${field} must be ${maxLength} characters or fewer`;
}
return null;
}
export async function validateTimeEntryResources({
organizationId,
clientId,
categoryId,
tagIds,
tagId,
}: {
organizationId: string;
clientId: string;
categoryId: string;
tagIds?: string[];
tagId?: string | null;
}) {
const [client, category] = await Promise.all([
db
const client = await db
.select()
.from(clients)
.where(
and(
eq(clients.id, clientId),
eq(clients.organizationId, organizationId),
),
and(eq(clients.id, clientId), eq(clients.organizationId, organizationId)),
)
.get(),
db
.select()
.from(categories)
.where(
and(
eq(categories.id, categoryId),
eq(categories.organizationId, organizationId),
),
)
.get(),
]);
.get();
if (!client) {
return { valid: false, error: "Invalid client" };
}
if (!category) {
return { valid: false, error: "Invalid category" };
}
if (tagIds && tagIds.length > 0) {
const validTags = await db
if (tagId) {
const validTag = await db
.select()
.from(tagsTable)
.where(
and(
inArray(tagsTable.id, tagIds),
eq(tagsTable.id, tagId),
eq(tagsTable.organizationId, organizationId),
),
)
.all();
.get();
if (validTags.length !== tagIds.length) {
return { valid: false, error: "Invalid tags" };
if (!validTag) {
return { valid: false, error: "Invalid tag" };
}
}
@@ -81,3 +84,9 @@ export function validateTimeRange(
return { valid: true, startDate, endDate };
}
const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
export function isValidEmail(email: string): boolean {
return EMAIL_REGEX.test(email) && email.length <= 320;
}

67
src/pages/admin/index.astro
View File

@@ -1,6 +1,7 @@
---
import DashboardLayout from '../../layouts/DashboardLayout.astro';
import Avatar from '../../components/Avatar.astro';
import StatCard from '../../components/StatCard.astro';
import { db } from '../../db';
import { siteSettings, users } from '../../db/schema';
import { eq } from 'drizzle-orm';
@@ -21,52 +22,52 @@ const allUsers = await db.select().from(users).all();
---
<DashboardLayout title="Site Admin - Chronus">
<h1 class="text-3xl font-bold mb-6">Site Administration</h1>
<div class="mb-6">
<h1 class="text-2xl font-extrabold tracking-tight">Site Administration</h1>
<p class="text-base-content/60 text-sm mt-1">Manage users and site settings</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
<!-- Statistics -->
<div class="stats shadow border border-base-200">
<div class="stat">
<div class="stat-title">Total Users</div>
<div class="stat-value">{allUsers.length}</div>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-6">
<StatCard
title="Total Users"
value={String(allUsers.length)}
description="Registered accounts"
icon="heroicons:users"
color="text-primary"
/>
</div>
<!-- Settings -->
<div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
<div class="card-body">
<h2 class="card-title mb-4">Site Settings</h2>
<div class="card card-border bg-base-100 mb-6">
<div class="card-body p-4">
<h2 class="text-sm font-semibold flex items-center gap-2 mb-4">Site Settings</h2>
<form method="POST" action="/api/admin/settings">
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text flex-1 min-w-0 pr-4">
<div class="font-semibold">Allow New Registrations</div>
<div class="text-sm text-gray-500">When disabled, only existing users can log in</div>
</span>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Allow New Registrations</legend>
<input
type="checkbox"
name="registration_enabled"
class="toggle toggle-primary"
class="toggle toggle-primary shrink-0"
checked={registrationEnabled}
/>
</label>
</div>
</fieldset>
<div class="card-actions justify-end mt-6">
<button type="submit" class="btn btn-primary">Save Settings</button>
<div class="flex justify-end mt-4">
<button type="submit" class="btn btn-primary btn-sm">Save Settings</button>
</div>
</form>
</div>
</div>
<!-- Users List -->
<div class="card bg-base-100 shadow-xl border border-base-200">
<div class="card-body">
<h2 class="card-title mb-4">All Users</h2>
<div class="card card-border bg-base-100">
<div class="card-body p-0">
<div class="px-4 py-3 border-b border-base-200">
<h2 class="text-sm font-semibold">All Users</h2>
</div>
<div class="overflow-x-auto">
<table class="table">
<table class="table table-sm">
<thead>
<tr>
<th>Name</th>
@@ -77,22 +78,22 @@ const allUsers = await db.select().from(users).all();
</thead>
<tbody>
{allUsers.map(u => (
<tr>
<tr class="hover">
<td>
<div class="flex items-center gap-3">
<Avatar name={u.name} />
<div class="font-bold">{u.name}</div>
<div class="font-medium">{u.name}</div>
</div>
</td>
<td>{u.email}</td>
<td class="text-base-content/60">{u.email}</td>
<td>
{u.isSiteAdmin ? (
<span class="badge badge-primary">Yes</span>
<span class="badge badge-xs badge-primary">Yes</span>
) : (
<span class="badge badge-ghost">No</span>
<span class="badge badge-xs badge-ghost">No</span>
)}
</td>
<td>{u.createdAt?.toLocaleDateString() ?? 'N/A'}</td>
<td class="text-base-content/40">{u.createdAt?.toLocaleDateString() ?? 'N/A'}</td>
</tr>
))}
</tbody>

3
src/pages/api/auth/passkey/login/finish.ts
View File

@@ -65,7 +65,8 @@ export const POST: APIRoute = async ({ request, cookies }) => {
},
});
} catch (error) {
return new Response(JSON.stringify({ error: (error as Error).message }), {
console.error("Passkey authentication verification failed:", error);
return new Response(JSON.stringify({ error: "Verification failed" }), {
status: 400,
});
}

5
src/pages/api/auth/passkey/login/start.ts
View File

@@ -2,8 +2,13 @@ import type { APIRoute } from "astro";
import { generateAuthenticationOptions } from "@simplewebauthn/server";
import { db } from "../../../../../db";
import { passkeyChallenges } from "../../../../../db/schema";
import { lte } from "drizzle-orm";
export const GET: APIRoute = async ({ request }) => {
await db
.delete(passkeyChallenges)
.where(lte(passkeyChallenges.expiresAt, new Date()));
const options = await generateAuthenticationOptions({
rpID: new URL(request.url).hostname,
userVerification: "preferred",

3
src/pages/api/auth/passkey/register/finish.ts
View File

@@ -48,7 +48,8 @@ export const POST: APIRoute = async ({ request, locals }) => {
expectedRPID: new URL(request.url).hostname,
});
} catch (error) {
return new Response(JSON.stringify({ error: (error as Error).message }), {
console.error("Passkey registration verification failed:", error);
return new Response(JSON.stringify({ error: "Verification failed" }), {
status: 400,
});
}

6
src/pages/api/auth/passkey/register/start.ts
View File

@@ -2,7 +2,7 @@ import type { APIRoute } from "astro";
import { generateRegistrationOptions } from "@simplewebauthn/server";
import { db } from "../../../../../db";
import { passkeys, passkeyChallenges } from "../../../../../db/schema";
import { eq } from "drizzle-orm";
import { eq, lte } from "drizzle-orm";
export const GET: APIRoute = async ({ request, locals }) => {
const user = locals.user;
@@ -13,6 +13,10 @@ export const GET: APIRoute = async ({ request, locals }) => {
});
}
await db
.delete(passkeyChallenges)
.where(lte(passkeyChallenges.expiresAt, new Date()));
const userPasskeys = await db.query.passkeys.findMany({
where: eq(passkeys.userId, user.id),
});

15
src/pages/api/auth/signup.ts
View File

@@ -7,6 +7,7 @@ import {
siteSettings,
} from "../../../db/schema";
import { hashPassword, createSession } from "../../../lib/auth";
import { isValidEmail, MAX_LENGTHS } from "../../../lib/validation";
import { eq, count, sql } from "drizzle-orm";
import { nanoid } from "nanoid";
@@ -37,6 +38,18 @@ export const POST: APIRoute = async ({ request, cookies, redirect }) => {
return redirect("/signup?error=missing_fields");
}
if (!isValidEmail(email)) {
return redirect("/signup?error=invalid_email");
}
if (name.length > MAX_LENGTHS.name) {
return redirect("/signup?error=name_too_long");
}
if (password.length > MAX_LENGTHS.password) {
return redirect("/signup?error=password_too_long");
}
if (password.length < 8) {
return redirect("/signup?error=password_too_short");
}
@@ -47,7 +60,7 @@ export const POST: APIRoute = async ({ request, cookies, redirect }) => {
.where(eq(users.email, email))
.get();
if (existingUser) {
return redirect("/signup?error=user_exists");
return redirect("/login?registered=true");
}
const passwordHash = await hashPassword(password);

67
src/pages/api/categories/[id]/delete.ts
View File

@@ -1,67 +0,0 @@
import type { APIRoute } from "astro";
import { db } from "../../../../db";
import { categories, members, timeEntries } from "../../../../db/schema";
import { eq, and } from "drizzle-orm";
export const POST: APIRoute = async ({ request, locals, redirect, params }) => {
const user = locals.user;
if (!user) {
return new Response("Unauthorized", { status: 401 });
}
const { id } = params;
let redirectTo: string | undefined;
if (request.headers.get("Content-Type")?.includes("application/json")) {
const body = await request.json();
redirectTo = body.redirectTo;
} else {
const formData = await request.formData();
redirectTo = formData.get("redirectTo")?.toString();
}
const userOrg = await db
.select()
.from(members)
.where(eq(members.userId, user.id))
.get();
if (!userOrg) {
return new Response("No organization found", { status: 400 });
}
const isAdmin = userOrg.role === "owner" || userOrg.role === "admin";
if (!isAdmin) {
return new Response("Forbidden", { status: 403 });
}
const hasEntries = await db
.select()
.from(timeEntries)
.where(eq(timeEntries.categoryId, id!))
.get();
if (hasEntries) {
return new Response("Cannot delete category with time entries", {
status: 400,
});
}
await db
.delete(categories)
.where(
and(
eq(categories.id, id!),
eq(categories.organizationId, userOrg.organizationId),
),
);
if (locals.scopes) {
return new Response(JSON.stringify({ success: true }), {
status: 200,
headers: { "Content-Type": "application/json" },
});
}
return redirect(redirectTo || "/dashboard/team/settings");
};

72
src/pages/api/categories/[id]/update.ts
View File

@@ -1,72 +0,0 @@
import type { APIRoute } from "astro";
import { db } from "../../../../db";
import { categories, members } from "../../../../db/schema";
import { eq, and } from "drizzle-orm";
export const POST: APIRoute = async ({ request, locals, redirect, params }) => {
const user = locals.user;
if (!user) {
return new Response("Unauthorized", { status: 401 });
}
const { id } = params;
let name: string | undefined;
let color: string | undefined;
let redirectTo: string | undefined;
if (request.headers.get("Content-Type")?.includes("application/json")) {
const body = await request.json();
name = body.name;
color = body.color;
redirectTo = body.redirectTo;
} else {
const formData = await request.formData();
name = formData.get("name")?.toString();
color = formData.get("color")?.toString();
redirectTo = formData.get("redirectTo")?.toString();
}
if (!name) {
return new Response("Name is required", { status: 400 });
}
const userOrg = await db
.select()
.from(members)
.where(eq(members.userId, user.id))
.get();
if (!userOrg) {
return new Response("No organization found", { status: 400 });
}
const isAdmin = userOrg.role === "owner" || userOrg.role === "admin";
if (!isAdmin) {
return new Response("Forbidden", { status: 403 });
}
await db
.update(categories)
.set({
name,
color: color || null,
})
.where(
and(
eq(categories.id, id!),
eq(categories.organizationId, userOrg.organizationId),
),
);
if (locals.scopes) {
return new Response(
JSON.stringify({ success: true, id, name, color: color || null }),
{
status: 200,
headers: { "Content-Type": "application/json" },
},
);
}
return redirect(redirectTo || "/dashboard/team/settings");
};

59
src/pages/api/categories/create.ts
View File

@@ -1,59 +0,0 @@
import type { APIRoute } from "astro";
import { db } from "../../../db";
import { categories, members } from "../../../db/schema";
import { eq } from "drizzle-orm";
import { nanoid } from "nanoid";
export const POST: APIRoute = async ({ request, locals, redirect }) => {
const user = locals.user;
if (!user) {
return new Response("Unauthorized", { status: 401 });
}
let name: string | undefined;
let color: string | undefined;
let redirectTo: string | undefined;
if (request.headers.get("Content-Type")?.includes("application/json")) {
const body = await request.json();
name = body.name;
color = body.color;
redirectTo = body.redirectTo;
} else {
const formData = await request.formData();
name = formData.get("name")?.toString();
color = formData.get("color")?.toString();
redirectTo = formData.get("redirectTo")?.toString();
}
if (!name) {
return new Response("Name is required", { status: 400 });
}
const userOrg = await db
.select()
.from(members)
.where(eq(members.userId, user.id))
.get();
if (!userOrg) {
return new Response("No organization found", { status: 400 });
}
const id = nanoid();
await db.insert(categories).values({
id,
organizationId: userOrg.organizationId,
name,
color: color || null,
});
if (locals.scopes) {
return new Response(JSON.stringify({ id, name, color: color || null }), {
status: 201,
headers: { "Content-Type": "application/json" },
});
}
return redirect(redirectTo || "/dashboard/team/settings");
};

33
src/pages/api/clients/[id]/delete.ts
View File

@@ -1,12 +1,7 @@
import type { APIRoute } from "astro";
import { db } from "../../../../db";
import {
clients,
members,
timeEntries,
timeEntryTags,
} from "../../../../db/schema";
import { eq, and, inArray } from "drizzle-orm";
import { clients, members, timeEntries } from "../../../../db/schema";
import { eq, and } from "drizzle-orm";
export const POST: APIRoute = async ({ params, locals, redirect }) => {
const user = locals.user;
@@ -57,22 +52,18 @@ export const POST: APIRoute = async ({ params, locals, redirect }) => {
return new Response("Not authorized", { status: 403 });
}
const clientEntries = await db
.select({ id: timeEntries.id })
.from(timeEntries)
.where(eq(timeEntries.clientId, id))
.all();
const entryIds = clientEntries.map((e) => e.id);
if (entryIds.length > 0) {
await db
.delete(timeEntryTags)
.where(inArray(timeEntryTags.timeEntryId, entryIds))
.run();
const isAdminOrOwner = membership.role === "owner" || membership.role === "admin";
if (!isAdminOrOwner) {
if (locals.scopes) {
return new Response(
JSON.stringify({ error: "Only owners and admins can delete clients" }),
{ status: 403, headers: { "Content-Type": "application/json" } },
);
}
return new Response("Only owners and admins can delete clients", { status: 403 });
}
await db.delete(timeEntries).where(eq(timeEntries.clientId, id)).run();
}
await db.delete(clients).where(eq(clients.id, id)).run();

31
src/pages/api/clients/[id]/update.ts
View File

@@ -2,6 +2,7 @@ import type { APIRoute } from "astro";
import { db } from "../../../../db";
import { clients, members } from "../../../../db/schema";
import { eq, and } from "drizzle-orm";
import { MAX_LENGTHS, exceedsLength } from "../../../../lib/validation";
export const POST: APIRoute = async ({ request, params, locals, redirect }) => {
const user = locals.user;
@@ -49,6 +50,25 @@ export const POST: APIRoute = async ({ request, params, locals, redirect }) => {
return new Response("Client name is required", { status: 400 });
}
const lengthError =
exceedsLength("Name", name, MAX_LENGTHS.name) ||
exceedsLength("Email", email, MAX_LENGTHS.email) ||
exceedsLength("Phone", phone, MAX_LENGTHS.phone) ||
exceedsLength("Street", street, MAX_LENGTHS.address) ||
exceedsLength("City", city, MAX_LENGTHS.address) ||
exceedsLength("State", state, MAX_LENGTHS.address) ||
exceedsLength("ZIP", zip, MAX_LENGTHS.address) ||
exceedsLength("Country", country, MAX_LENGTHS.address);
if (lengthError) {
if (locals.scopes) {
return new Response(JSON.stringify({ error: lengthError }), {
status: 400,
headers: { "Content-Type": "application/json" },
});
}
return new Response(lengthError, { status: 400 });
}
try {
const client = await db
.select()
@@ -87,6 +107,17 @@ export const POST: APIRoute = async ({ request, params, locals, redirect }) => {
return new Response("Not authorized", { status: 403 });
}
const isAdminOrOwner = membership.role === "owner" || membership.role === "admin";
if (!isAdminOrOwner) {
if (locals.scopes) {
return new Response(
JSON.stringify({ error: "Only owners and admins can update clients" }),
{ status: 403, headers: { "Content-Type": "application/json" } },
);
}
return new Response("Only owners and admins can update clients", { status: 403 });
}
await db
.update(clients)
.set({

31
src/pages/api/clients/create.ts
View File

@@ -3,6 +3,7 @@ import { db } from "../../../db";
import { clients, members } from "../../../db/schema";
import { eq } from "drizzle-orm";
import { nanoid } from "nanoid";
import { MAX_LENGTHS, exceedsLength } from "../../../lib/validation";
export const POST: APIRoute = async ({ request, locals, redirect }) => {
const user = locals.user;
@@ -45,6 +46,25 @@ export const POST: APIRoute = async ({ request, locals, redirect }) => {
return new Response("Name is required", { status: 400 });
}
const lengthError =
exceedsLength("Name", name, MAX_LENGTHS.name) ||
exceedsLength("Email", email, MAX_LENGTHS.email) ||
exceedsLength("Phone", phone, MAX_LENGTHS.phone) ||
exceedsLength("Street", street, MAX_LENGTHS.address) ||
exceedsLength("City", city, MAX_LENGTHS.address) ||
exceedsLength("State", state, MAX_LENGTHS.address) ||
exceedsLength("ZIP", zip, MAX_LENGTHS.address) ||
exceedsLength("Country", country, MAX_LENGTHS.address);
if (lengthError) {
if (locals.scopes) {
return new Response(JSON.stringify({ error: lengthError }), {
status: 400,
headers: { "Content-Type": "application/json" },
});
}
return new Response(lengthError, { status: 400 });
}
const userOrg = await db
.select()
.from(members)
@@ -55,6 +75,17 @@ export const POST: APIRoute = async ({ request, locals, redirect }) => {
return new Response("No organization found", { status: 400 });
}
const isAdminOrOwner = userOrg.role === "owner" || userOrg.role === "admin";
if (!isAdminOrOwner) {
if (locals.scopes) {
return new Response(
JSON.stringify({ error: "Only owners and admins can create clients" }),
{ status: 403, headers: { "Content-Type": "application/json" } },
);
}
return new Response("Only owners and admins can create clients", { status: 403 });
}
const id = nanoid();
await db.insert(clients).values({

5
src/pages/api/invoices/[id]/convert.ts
View File

@@ -45,6 +45,11 @@ export const POST: APIRoute = async ({ redirect, locals, params }) => {
return new Response("Unauthorized", { status: 401 });
}
const isAdminOrOwner = membership.role === "owner" || membership.role === "admin";
if (!isAdminOrOwner) {
return new Response("Only owners and admins can convert quotes", { status: 403 });
}
try {
const lastInvoice = await db
.select()

91
src/pages/api/invoices/[id]/generate.ts
View File

@@ -1,4 +1,5 @@
import type { APIRoute } from "astro";
import { renderToStream } from "@ceereals/vue-pdf";
import { db } from "../../../../db";
import {
invoices,
@@ -8,18 +9,20 @@ import {
members,
} from "../../../../db/schema";
import { eq, and } from "drizzle-orm";
import { renderToStream } from "@ceereals/vue-pdf";
import { createInvoiceDocument } from "../../../../pdf/generateInvoicePDF";
export const GET: APIRoute = async ({ params, locals }) => {
try {
const { id } = params;
const user = locals.user;
if (!user || !id) {
if (!user) {
return new Response("Unauthorized", { status: 401 });
}
const { id } = params;
if (!id) {
return new Response("Invoice ID is required", { status: 400 });
}
// Fetch invoice with related data
const invoiceResult = await db
.select({
invoice: invoices,
@@ -38,6 +41,7 @@ export const GET: APIRoute = async ({ params, locals }) => {
const { invoice, client, organization } = invoiceResult;
// Verify membership
const membership = await db
.select()
.from(members)
@@ -50,53 +54,64 @@ export const GET: APIRoute = async ({ params, locals }) => {
.get();
if (!membership) {
return new Response("Forbidden", { status: 403 });
return new Response("Not authorized", { status: 403 });
}
// Fetch items
const items = await db
.select()
.from(invoiceItems)
.where(eq(invoiceItems.invoiceId, invoice.id))
.all();
if (!client) {
return new Response("Client not found", { status: 404 });
}
const originalConsoleLog = console.log;
const originalConsoleWarn = console.warn;
console.log = () => {};
console.warn = () => {};
try {
const pdfDocument = createInvoiceDocument({
invoice,
const document = createInvoiceDocument({
invoice: {
...invoice,
notes: invoice.notes || null,
// Ensure null safety for optional fields that might be undefined in some runtimes depending on driver
discountValue: invoice.discountValue ?? null,
discountType: invoice.discountType ?? null,
discountAmount: invoice.discountAmount ?? null,
taxRate: invoice.taxRate ?? null,
},
items,
client,
organization,
});
const stream = await renderToStream(pdfDocument);
console.log = originalConsoleLog;
console.warn = originalConsoleWarn;
const filename = `${invoice.type}_${invoice.number.replace(/[^a-zA-Z0-9]/g, "_")}.pdf`;
return new Response(stream as any, {
headers: {
"Content-Type": "application/pdf",
"Content-Disposition": `attachment; filename="${filename}"`,
client: {
name: client?.name || "Deleted Client",
email: client?.email || null,
street: client?.street || null,
city: client?.city || null,
state: client?.state || null,
zip: client?.zip || null,
country: client?.country || null,
},
organization: {
name: organization.name,
street: organization.street || null,
city: organization.city || null,
state: organization.state || null,
zip: organization.zip || null,
country: organization.country || null,
logoUrl: organization.logoUrl || null,
},
});
} catch (pdfError) {
// Restore console.log on error
console.log = originalConsoleLog;
console.warn = originalConsoleWarn;
throw pdfError;
const stream = await renderToStream(document);
const chunks: Uint8Array[] = [];
for await (const chunk of stream) {
chunks.push(chunk as Uint8Array);
}
const buffer = Buffer.concat(chunks);
return new Response(buffer, {
headers: {
"Content-Type": "application/pdf",
"Content-Disposition": `attachment; filename="${invoice.number.replace(/[^a-zA-Z0-9_\-\.]/g, "_")}.pdf"`,
},
});
} catch (error) {
console.error("Error generating PDF:", error);
return new Response("Error generating PDF", { status: 500 });
return new Response("Failed to generate PDF", { status: 500 });
}
};

277
src/pages/api/invoices/[id]/import-time.ts Normal file
View File

@@ -0,0 +1,277 @@
import type { APIRoute } from "astro";
import { db } from "../../../../db";
import {
invoices,
invoiceItems,
timeEntries,
members,
tags,
} from "../../../../db/schema";
import {
eq,
and,
gte,
lte,
isNull,
isNotNull,
inArray,
sql,
desc,
} from "drizzle-orm";
import { nanoid } from "nanoid";
export const POST: APIRoute = async ({ request, params, locals, redirect }) => {
const user = locals.user;
if (!user) {
return new Response("Unauthorized", { status: 401 });
}
const { id } = params;
if (!id) {
return new Response("Invoice ID is required", { status: 400 });
}
const formData = await request.formData();
const startDateStr = formData.get("startDate") as string;
const endDateStr = formData.get("endDate") as string;
const groupByDay = formData.get("groupByDay") === "on";
if (!startDateStr || !endDateStr) {
return new Response("Start date and end date are required", {
status: 400,
});
}
const startDate = new Date(startDateStr);
const endDate = new Date(endDateStr);
// Set end date to end of day
endDate.setHours(23, 59, 59, 999);
const invoice = await db
.select()
.from(invoices)
.where(eq(invoices.id, id))
.get();
if (!invoice) {
return new Response("Invoice not found", { status: 404 });
}
const membership = await db
.select()
.from(members)
.where(
and(
eq(members.userId, user.id),
eq(members.organizationId, invoice.organizationId),
),
)
.get();
if (!membership) {
return new Response("Not authorized", { status: 403 });
}
if (invoice.status !== "draft") {
return new Response("Can only import time into draft invoices", {
status: 400,
});
}
const entries = await db
.select({
entry: timeEntries,
tag: tags,
})
.from(timeEntries)
.leftJoin(tags, eq(timeEntries.tagId, tags.id))
.where(
and(
eq(timeEntries.organizationId, invoice.organizationId),
eq(timeEntries.clientId, invoice.clientId),
isNull(timeEntries.invoiceId),
isNotNull(timeEntries.endTime),
gte(timeEntries.startTime, startDate),
lte(timeEntries.startTime, endDate),
),
)
.orderBy(desc(timeEntries.startTime));
const processedEntries = new Map<
string,
{
entry: typeof timeEntries.$inferSelect;
rates: number[];
tagNames: string[];
}
>();
for (const { entry, tag } of entries) {
if (!processedEntries.has(entry.id)) {
processedEntries.set(entry.id, {
entry,
rates: [],
tagNames: [],
});
}
const current = processedEntries.get(entry.id)!;
if (tag) {
if (tag.rate && tag.rate > 0) {
current.rates.push(tag.rate);
}
current.tagNames.push(tag.name);
}
}
const newItems: {
id: string;
invoiceId: string;
description: string;
quantity: number;
unitPrice: number;
amount: number;
}[] = [];
const entryIdsToUpdate: string[] = [];
if (groupByDay) {
// Group by YYYY-MM-DD
const days = new Map<
string,
{
date: string;
totalDuration: number; // milliseconds
totalAmount: number; // cents
entries: string[]; // ids
}
>();
for (const { entry, rates } of processedEntries.values()) {
if (!entry.endTime) continue;
const dateKey = entry.startTime.toISOString().split("T")[0];
const duration = entry.endTime.getTime() - entry.startTime.getTime();
const hours = duration / (1000 * 60 * 60);
// Determine rate: max of tags, or 0
const rate = rates.length > 0 ? Math.max(...rates) : 0;
const amount = Math.round(hours * rate);
if (!days.has(dateKey)) {
days.set(dateKey, {
date: dateKey,
totalDuration: 0,
totalAmount: 0,
entries: [],
});
}
const day = days.get(dateKey)!;
day.totalDuration += duration;
day.totalAmount += amount;
day.entries.push(entry.id);
entryIdsToUpdate.push(entry.id);
}
for (const day of days.values()) {
const hours = day.totalDuration / (1000 * 60 * 60);
// Avoid division by zero
const unitPrice = hours > 0 ? Math.round(day.totalAmount / hours) : 0;
newItems.push({
id: nanoid(),
invoiceId: invoice.id,
description: `Time entries for ${day.date} (${day.entries.length} entries)`,
quantity: parseFloat(hours.toFixed(2)),
unitPrice,
amount: day.totalAmount,
});
}
} else {
// Individual items
for (const { entry, rates, tagNames } of processedEntries.values()) {
if (!entry.endTime) continue;
const duration = entry.endTime.getTime() - entry.startTime.getTime();
const hours = duration / (1000 * 60 * 60);
// Determine rate: max of tags, or 0
const rate = rates.length > 0 ? Math.max(...rates) : 0;
const amount = Math.round(hours * rate);
let description = entry.description || "Time Entry";
const dateStr = entry.startTime.toLocaleDateString();
description = `[${dateStr}] ${description}`;
if (tagNames.length > 0) {
description += ` (${tagNames.join(", ")})`;
}
newItems.push({
id: nanoid(),
invoiceId: invoice.id,
description,
quantity: parseFloat(hours.toFixed(2)),
unitPrice: rate,
amount,
});
entryIdsToUpdate.push(entry.id);
}
}
if (newItems.length === 0) {
return redirect(`/dashboard/invoices/${id}?error=no-entries`);
}
try {
await db.transaction(async (tx) => {
await tx.insert(invoiceItems).values(newItems);
if (entryIdsToUpdate.length > 0) {
await tx
.update(timeEntries)
.set({ invoiceId: invoice.id })
.where(inArray(timeEntries.id, entryIdsToUpdate));
}
const allItems = await tx
.select()
.from(invoiceItems)
.where(eq(invoiceItems.invoiceId, invoice.id));
const subtotal = allItems.reduce((sum, item) => sum + item.amount, 0);
let discountAmount = 0;
if (invoice.discountType === "percentage") {
discountAmount = Math.round(
subtotal * ((invoice.discountValue || 0) / 100),
);
} else {
discountAmount = Math.round((invoice.discountValue || 0) * 100);
if (invoice.discountValue && invoice.discountValue > 0) {
discountAmount = Math.round((invoice.discountValue || 0) * 100);
}
}
const taxableAmount = Math.max(0, subtotal - discountAmount);
const taxAmount = Math.round(
taxableAmount * ((invoice.taxRate || 0) / 100),
);
const total = subtotal - discountAmount + taxAmount;
await tx
.update(invoices)
.set({
subtotal,
discountAmount,
taxAmount,
total,
})
.where(eq(invoices.id, invoice.id));
});
return redirect(`/dashboard/invoices/${id}?success=imported`);
} catch (error) {
console.error("Error importing time entries:", error);
return new Response("Failed to import time entries", { status: 500 });
}
};

6
src/pages/api/invoices/[id]/items/add.ts
View File

@@ -3,6 +3,7 @@ import { db } from "../../../../../db";
import { invoiceItems, invoices, members } from "../../../../../db/schema";
import { eq, and } from "drizzle-orm";
import { recalculateInvoiceTotals } from "../../../../../utils/invoice";
import { MAX_LENGTHS, exceedsLength } from "../../../../../lib/validation";
export const POST: APIRoute = async ({
request,
@@ -61,6 +62,11 @@ export const POST: APIRoute = async ({
return new Response("Missing required fields", { status: 400 });
}
const lengthError = exceedsLength("Description", description, MAX_LENGTHS.itemDescription);
if (lengthError) {
return new Response(lengthError, { status: 400 });
}
const quantity = parseFloat(quantityStr);
const unitPriceMajor = parseFloat(unitPriceStr);

7
src/pages/api/invoices/[id]/status.ts
View File

@@ -60,6 +60,13 @@ export const POST: APIRoute = async ({
return new Response("Unauthorized", { status: 401 });
}
// Destructive status changes require owner/admin
const destructiveStatuses = ["void"];
const isAdminOrOwner = membership.role === "owner" || membership.role === "admin";
if (destructiveStatuses.includes(status) && !isAdminOrOwner) {
return new Response("Only owners and admins can void invoices", { status: 403 });
}
try {
await db
.update(invoices)

9
src/pages/api/invoices/[id]/update.ts
View File

@@ -3,6 +3,7 @@ import { db } from "../../../../db";
import { invoices, members } from "../../../../db/schema";
import { eq, and } from "drizzle-orm";
import { recalculateInvoiceTotals } from "../../../../utils/invoice";
import { MAX_LENGTHS, exceedsLength } from "../../../../lib/validation";
export const POST: APIRoute = async ({ request, redirect, locals, params }) => {
const user = locals.user;
@@ -56,6 +57,14 @@ export const POST: APIRoute = async ({ request, redirect, locals, params }) => {
return new Response("Missing required fields", { status: 400 });
}
const lengthError =
exceedsLength("Invoice number", number, MAX_LENGTHS.invoiceNumber) ||
exceedsLength("Currency", currency, MAX_LENGTHS.currency) ||
exceedsLength("Notes", notes, MAX_LENGTHS.invoiceNotes);
if (lengthError) {
return new Response(lengthError, { status: 400 });
}
try {
const issueDate = new Date(issueDateStr);
const dueDate = new Date(dueDateStr);

5
src/pages/api/invoices/delete.ts
View File

@@ -43,6 +43,11 @@ export const POST: APIRoute = async ({ request, redirect, locals }) => {
return new Response("Unauthorized", { status: 401 });
}
const isAdminOrOwner = membership.role === "owner" || membership.role === "admin";
if (!isAdminOrOwner) {
return new Response("Only owners and admins can delete invoices", { status: 403 });
}
try {
// Delete invoice items first (manual cascade)
await db.delete(invoiceItems).where(eq(invoiceItems.invoiceId, invoiceId));

21
src/pages/api/organizations/update-name.ts
View File

@@ -4,6 +4,7 @@ import path from "path";
import { db } from "../../../db";
import { organizations, members } from "../../../db/schema";
import { eq, and } from "drizzle-orm";
import { MAX_LENGTHS, exceedsLength } from "../../../lib/validation";
export const POST: APIRoute = async ({ request, locals, redirect }) => {
const user = locals.user;
@@ -19,6 +20,8 @@ export const POST: APIRoute = async ({ request, locals, redirect }) => {
const state = formData.get("state") as string | null;
const zip = formData.get("zip") as string | null;
const country = formData.get("country") as string | null;
const defaultTaxRate = formData.get("defaultTaxRate") as string | null;
const defaultCurrency = formData.get("defaultCurrency") as string | null;
const logo = formData.get("logo") as File | null;
if (!organizationId || !name || name.trim().length === 0) {
@@ -27,6 +30,18 @@ export const POST: APIRoute = async ({ request, locals, redirect }) => {
});
}
const lengthError =
exceedsLength("Name", name, MAX_LENGTHS.name) ||
exceedsLength("Street", street, MAX_LENGTHS.address) ||
exceedsLength("City", city, MAX_LENGTHS.address) ||
exceedsLength("State", state, MAX_LENGTHS.address) ||
exceedsLength("ZIP", zip, MAX_LENGTHS.address) ||
exceedsLength("Country", country, MAX_LENGTHS.address) ||
exceedsLength("Currency", defaultCurrency, MAX_LENGTHS.currency);
if (lengthError) {
return new Response(lengthError, { status: 400 });
}
try {
// Verify user is admin/owner of this organization
const membership = await db
@@ -65,7 +80,9 @@ export const POST: APIRoute = async ({ request, locals, redirect }) => {
);
}
const ext = logo.name.split(".").pop() || "png";
const rawExt = (logo.name.split(".").pop() || "png").toLowerCase().replace(/[^a-z]/g, "");
const allowedExtensions = ["png", "jpg", "jpeg"];
const ext = allowedExtensions.includes(rawExt) ? rawExt : "png";
const filename = `${organizationId}-${Date.now()}.${ext}`;
const dataDir = process.env.DATA_DIR
? process.env.DATA_DIR
@@ -96,6 +113,8 @@ export const POST: APIRoute = async ({ request, locals, redirect }) => {
state: state?.trim() || null,
zip: zip?.trim() || null,
country: country?.trim() || null,
defaultTaxRate: defaultTaxRate ? parseFloat(defaultTaxRate) : 0,
defaultCurrency: defaultCurrency || "USD",
};
if (logoUrl) {

122
src/pages/api/reports/export.ts
View File

@@ -1,72 +1,89 @@
import type { APIRoute } from 'astro';
import { db } from '../../../db';
import { timeEntries, members, users, clients, categories } from '../../../db/schema';
import { eq, and, gte, lte, desc } from 'drizzle-orm';
import type { APIRoute } from "astro";
import { db } from "../../../db";
import { timeEntries, members, users, clients, tags } from "../../../db/schema";
import { eq, and, gte, lte, desc } from "drizzle-orm";
export const GET: APIRoute = async ({ request, locals, cookies }) => {
const user = locals.user;
if (!user) {
return new Response('Unauthorized', { status: 401 });
return new Response("Unauthorized", { status: 401 });
}
// Get current team from cookie
const currentTeamId = cookies.get('currentTeamId')?.value;
const currentTeamId = cookies.get("currentTeamId")?.value;
const userMemberships = await db.select()
const userMemberships = await db
.select()
.from(members)
.where(eq(members.userId, user.id))
.all();
if (userMemberships.length === 0) {
return new Response('No organization found', { status: 404 });
return new Response("No organization found", { status: 404 });
}
// Use current team or fallback to first membership
const userMembership = currentTeamId
? userMemberships.find(m => m.organizationId === currentTeamId) || userMemberships[0]
? userMemberships.find((m) => m.organizationId === currentTeamId) ||
userMemberships[0]
: userMemberships[0];
const url = new URL(request.url);
const selectedMemberId = url.searchParams.get('member') || '';
const selectedCategoryId = url.searchParams.get('category') || '';
const selectedClientId = url.searchParams.get('client') || '';
const timeRange = url.searchParams.get('range') || 'week';
const customFrom = url.searchParams.get('from');
const customTo = url.searchParams.get('to');
const selectedMemberId = url.searchParams.get("member") || "";
const selectedClientId = url.searchParams.get("client") || "";
const timeRange = url.searchParams.get("range") || "week";
const customFrom = url.searchParams.get("from");
const customTo = url.searchParams.get("to");
const now = new Date();
let startDate = new Date();
let endDate = new Date();
switch (timeRange) {
case 'today':
case "today":
startDate.setHours(0, 0, 0, 0);
endDate.setHours(23, 59, 59, 999);
break;
case 'week':
case "week":
startDate.setDate(now.getDate() - 7);
break;
case 'month':
case "month":
startDate.setMonth(now.getMonth() - 1);
break;
case 'mtd':
case "mtd":
startDate = new Date(now.getFullYear(), now.getMonth(), 1);
break;
case 'ytd':
case "ytd":
startDate = new Date(now.getFullYear(), 0, 1);
break;
case 'last-month':
case "last-month":
startDate = new Date(now.getFullYear(), now.getMonth() - 1, 1);
endDate = new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59, 999);
break;
case 'custom':
case "custom":
if (customFrom) {
const parts = customFrom.split('-');
startDate = new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2]), 0, 0, 0, 0);
const parts = customFrom.split("-");
startDate = new Date(
parseInt(parts[0]),
parseInt(parts[1]) - 1,
parseInt(parts[2]),
0,
0,
0,
0,
);
}
if (customTo) {
const parts = customTo.split('-');
endDate = new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2]), 23, 59, 59, 999);
const parts = customTo.split("-");
endDate = new Date(
parseInt(parts[0]),
parseInt(parts[1]) - 1,
parseInt(parts[2]),
23,
59,
59,
999,
);
}
break;
}
@@ -81,31 +98,44 @@ export const GET: APIRoute = async ({ request, locals, cookies }) => {
conditions.push(eq(timeEntries.userId, selectedMemberId));
}
if (selectedCategoryId) {
conditions.push(eq(timeEntries.categoryId, selectedCategoryId));
}
if (selectedClientId) {
conditions.push(eq(timeEntries.clientId, selectedClientId));
}
const entries = await db.select({
const entries = await db
.select({
entry: timeEntries,
user: users,
client: clients,
category: categories,
tag: tags,
})
.from(timeEntries)
.innerJoin(users, eq(timeEntries.userId, users.id))
.innerJoin(clients, eq(timeEntries.clientId, clients.id))
.innerJoin(categories, eq(timeEntries.categoryId, categories.id))
.leftJoin(tags, eq(timeEntries.tagId, tags.id))
.where(and(...conditions))
.orderBy(desc(timeEntries.startTime))
.all();
// Generate CSV
const headers = ['Date', 'Start Time', 'End Time', 'Duration (h)', 'Member', 'Client', 'Category', 'Description'];
const rows = entries.map(e => {
const headers = [
"Date",
"Start Time",
"End Time",
"Duration (h)",
"Member",
"Client",
"Tag",
"Description",
];
const sanitizeCell = (value: string): string => {
if (/^[=+\-@\t\r]/.test(value)) {
return `\t${value}`;
}
return value;
};
const rows = entries.map((e) => {
const start = e.entry.startTime;
const end = e.entry.endTime;
@@ -114,24 +144,26 @@ export const GET: APIRoute = async ({ request, locals, cookies }) => {
duration = (end.getTime() - start.getTime()) / (1000 * 60 * 60); // Hours
}
const tagsStr = e.tag?.name || "";
return [
start.toLocaleDateString(),
start.toLocaleTimeString(),
end ? end.toLocaleTimeString() : '',
end ? duration.toFixed(2) : 'Running',
`"${(e.user.name || '').replace(/"/g, '""')}"`,
`"${(e.client.name || '').replace(/"/g, '""')}"`,
`"${(e.category.name || '').replace(/"/g, '""')}"`,
`"${(e.entry.description || '').replace(/"/g, '""')}"`
].join(',');
end ? end.toLocaleTimeString() : "",
end ? duration.toFixed(2) : "Running",
`"${sanitizeCell((e.user.name || "").replace(/"/g, '""'))}"`,
`"${sanitizeCell((e.client.name || "").replace(/"/g, '""'))}"`,
`"${sanitizeCell(tagsStr.replace(/"/g, '""'))}"`,
`"${sanitizeCell((e.entry.description || "").replace(/"/g, '""'))}"`,
].join(",");
});
const csvContent = [headers.join(','), ...rows].join('\n');
const csvContent = [headers.join(","), ...rows].join("\n");
return new Response(csvContent, {
headers: {
'Content-Type': 'text/csv',
'Content-Disposition': `attachment; filename="time-entries-${startDate.toISOString().split('T')[0]}-to-${endDate.toISOString().split('T')[0]}.csv"`,
"Content-Type": "text/csv",
"Content-Disposition": `attachment; filename="time-entries-${startDate.toISOString().split("T")[0]}-to-${endDate.toISOString().split("T")[0]}.csv"`,
},
});
};

57
src/pages/api/tags/[id]/delete.ts Normal file
View File

@@ -0,0 +1,57 @@
import type { APIRoute } from "astro";
import { db } from "../../../../db";
import { tags, members, timeEntries } from "../../../../db/schema";
import { eq, and } from "drizzle-orm";
export const POST: APIRoute = async ({ params, locals, redirect }) => {
const user = locals.user;
if (!user) {
return new Response("Unauthorized", { status: 401 });
}
const { id } = params;
if (!id) {
return new Response("Tag ID is required", { status: 400 });
}
// Get the tag to check organization
const tag = await db.select().from(tags).where(eq(tags.id, id)).get();
if (!tag) {
return new Response("Tag not found", { status: 404 });
}
// Verify membership and permissions
const membership = await db
.select()
.from(members)
.where(
and(
eq(members.userId, user.id),
eq(members.organizationId, tag.organizationId),
),
)
.get();
if (!membership) {
return new Response("Not authorized", { status: 403 });
}
const isAdmin = membership.role === "owner" || membership.role === "admin";
if (!isAdmin) {
return new Response("Only owners and admins can manage tags", {
status: 403,
});
}
// Remove tag from time entries
await db
.update(timeEntries)
.set({ tagId: null })
.where(eq(timeEntries.tagId, id));
// Delete the tag
await db.delete(tags).where(eq(tags.id, id));
return redirect("/dashboard/team/settings?success=tags");
};

77
src/pages/api/tags/[id]/update.ts Normal file
View File

@@ -0,0 +1,77 @@
import type { APIRoute } from "astro";
import { db } from "../../../../db";
import { tags, members } from "../../../../db/schema";
import { eq, and } from "drizzle-orm";
export const POST: APIRoute = async ({
request,
params,
locals,
redirect,
}) => {
const user = locals.user;
if (!user) {
return new Response("Unauthorized", { status: 401 });
}
const { id } = params;
if (!id) {
return new Response("Tag ID is required", { status: 400 });
}
let name: string | undefined;
let color: string | undefined;
let rate: number | undefined;
if (request.headers.get("Content-Type")?.includes("application/json")) {
const body = await request.json();
name = body.name;
color = body.color;
rate = body.rate !== undefined ? parseInt(body.rate) : undefined;
} else {
const formData = await request.formData();
name = formData.get("name")?.toString();
color = formData.get("color")?.toString();
const rateStr = formData.get("rate")?.toString();
rate = rateStr ? parseInt(rateStr) : undefined;
}
// Get the tag to check organization
const tag = await db.select().from(tags).where(eq(tags.id, id)).get();
if (!tag) {
return new Response("Tag not found", { status: 404 });
}
// Verify membership and permissions
const membership = await db
.select()
.from(members)
.where(
and(
eq(members.userId, user.id),
eq(members.organizationId, tag.organizationId),
),
)
.get();
if (!membership) {
return new Response("Not authorized", { status: 403 });
}
const isAdmin = membership.role === "owner" || membership.role === "admin";
if (!isAdmin) {
return new Response("Only owners and admins can manage tags", {
status: 403,
});
}
const updateData: any = {};
if (name) updateData.name = name;
if (color) updateData.color = color;
if (rate !== undefined) updateData.rate = rate;
await db.update(tags).set(updateData).where(eq(tags.id, id));
return redirect("/dashboard/team/settings?success=tags");
};

72
src/pages/api/tags/create.ts Normal file
View File

@@ -0,0 +1,72 @@
import type { APIRoute } from "astro";
import { db } from "../../../db";
import { tags, members } from "../../../db/schema";
import { eq, and } from "drizzle-orm";
import { nanoid } from "nanoid";
export const POST: APIRoute = async ({ request, locals, redirect }) => {
const user = locals.user;
if (!user) {
return new Response("Unauthorized", { status: 401 });
}
let name: string | undefined;
let color: string | undefined;
let rate: number | undefined;
let organizationId: string | undefined;
if (request.headers.get("Content-Type")?.includes("application/json")) {
const body = await request.json();
name = body.name;
color = body.color;
rate = body.rate ? parseInt(body.rate) : 0;
organizationId = body.organizationId;
} else {
const formData = await request.formData();
name = formData.get("name")?.toString();
color = formData.get("color")?.toString();
const rateStr = formData.get("rate")?.toString();
rate = rateStr ? parseInt(rateStr) : 0;
organizationId = formData.get("organizationId")?.toString();
}
if (!name || !organizationId) {
return new Response("Name and Organization ID are required", {
status: 400,
});
}
// Verify membership and permissions
const membership = await db
.select()
.from(members)
.where(
and(
eq(members.userId, user.id),
eq(members.organizationId, organizationId),
),
)
.get();
if (!membership) {
return new Response("Not authorized", { status: 403 });
}
const isAdmin = membership.role === "owner" || membership.role === "admin";
if (!isAdmin) {
return new Response("Only owners and admins can manage tags", {
status: 403,
});
}
const id = nanoid();
await db.insert(tags).values({
id,
organizationId,
name,
color: color || null,
rate: rate || 0,
});
return redirect("/dashboard/team/settings?success=tags");
};

5
src/pages/api/team/invite.ts
View File

@@ -2,6 +2,7 @@ import type { APIRoute } from 'astro';
import { db } from '../../../db';
import { users, members } from '../../../db/schema';
import { eq, and } from 'drizzle-orm';
import { isValidEmail } from '../../../lib/validation';
export const POST: APIRoute = async ({ request, locals, redirect }) => {
const user = locals.user;
@@ -26,6 +27,10 @@ export const POST: APIRoute = async ({ request, locals, redirect }) => {
return new Response('Email is required', { status: 400 });
}
if (!isValidEmail(email)) {
return new Response('Invalid email format', { status: 400 });
}
if (!['member', 'admin'].includes(role)) {
return new Response('Invalid role', { status: 400 });
}

30
src/pages/api/time-entries/manual.ts
View File

@@ -1,11 +1,12 @@
import type { APIRoute } from "astro";
import { db } from "../../../db";
import { timeEntries, members, timeEntryTags } from "../../../db/schema";
import { timeEntries, members } from "../../../db/schema";
import { eq } from "drizzle-orm";
import { nanoid } from "nanoid";
import {
validateTimeEntryResources,
validateTimeRange,
MAX_LENGTHS,
} from "../../../lib/validation";
export const POST: APIRoute = async ({ request, locals }) => {
@@ -17,7 +18,7 @@ export const POST: APIRoute = async ({ request, locals }) => {
}
const body = await request.json();
const { description, clientId, categoryId, startTime, endTime, tags } = body;
const { description, clientId, startTime, endTime, tagId } = body;
// Validation
if (!clientId) {
@@ -27,11 +28,11 @@ export const POST: APIRoute = async ({ request, locals }) => {
});
}
if (!categoryId) {
return new Response(JSON.stringify({ error: "Category is required" }), {
status: 400,
headers: { "Content-Type": "application/json" },
});
if (description && description.length > MAX_LENGTHS.description) {
return new Response(
JSON.stringify({ error: `Description must be ${MAX_LENGTHS.description} characters or fewer` }),
{ status: 400, headers: { "Content-Type": "application/json" } },
);
}
if (!startTime) {
@@ -81,8 +82,7 @@ export const POST: APIRoute = async ({ request, locals }) => {
const resourceValidation = await validateTimeEntryResources({
organizationId: member.organizationId,
clientId,
categoryId,
tagIds: Array.isArray(tags) ? tags : undefined,
tagId: tagId || null,
});
if (!resourceValidation.valid) {
@@ -101,23 +101,13 @@ export const POST: APIRoute = async ({ request, locals }) => {
userId: locals.user.id,
organizationId: member.organizationId,
clientId,
categoryId,
tagId: tagId || null,
startTime: startDate,
endTime: endDate,
description: description || null,
isManual: true,
});
// Insert tags if provided
if (tags && Array.isArray(tags) && tags.length > 0) {
await db.insert(timeEntryTags).values(
tags.map((tagId: string) => ({
timeEntryId: id,
tagId,
})),
);
}
return new Response(
JSON.stringify({
success: true,

25
src/pages/api/time-entries/start.ts
View File

@@ -1,9 +1,9 @@
import type { APIRoute } from "astro";
import { db } from "../../../db";
import { timeEntries, members, timeEntryTags } from "../../../db/schema";
import { timeEntries, members } from "../../../db/schema";
import { eq, and, isNull } from "drizzle-orm";
import { nanoid } from "nanoid";
import { validateTimeEntryResources } from "../../../lib/validation";
import { validateTimeEntryResources, MAX_LENGTHS } from "../../../lib/validation";
export const POST: APIRoute = async ({ request, locals }) => {
if (!locals.user) return new Response("Unauthorized", { status: 401 });
@@ -11,15 +11,14 @@ export const POST: APIRoute = async ({ request, locals }) => {
const body = await request.json();
const description = body.description || "";
const clientId = body.clientId;
const categoryId = body.categoryId;
const tags = body.tags || [];
const tagId = body.tagId || null;
if (!clientId) {
return new Response("Client is required", { status: 400 });
}
if (!categoryId) {
return new Response("Category is required", { status: 400 });
if (description && description.length > MAX_LENGTHS.description) {
return new Response(`Description must be ${MAX_LENGTHS.description} characters or fewer`, { status: 400 });
}
const runningEntry = await db
@@ -47,8 +46,7 @@ export const POST: APIRoute = async ({ request, locals }) => {
const validation = await validateTimeEntryResources({
organizationId: member.organizationId,
clientId,
categoryId,
tagIds: tags,
tagId,
});
if (!validation.valid) {
@@ -63,20 +61,11 @@ export const POST: APIRoute = async ({ request, locals }) => {
userId: locals.user.id,
organizationId: member.organizationId,
clientId,
categoryId,
tagId,
startTime,
description,
isManual: false,
});
if (tags.length > 0) {
await db.insert(timeEntryTags).values(
tags.map((tagId: string) => ({
timeEntryId: id,
tagId,
})),
);
}
return new Response(JSON.stringify({ id, startTime }), { status: 200 });
};

38
src/pages/api/user/change-password.ts
View File

@@ -1,10 +1,11 @@
import type { APIRoute } from "astro";
import { db } from "../../../db";
import { users } from "../../../db/schema";
import { users, sessions } from "../../../db/schema";
import { eq } from "drizzle-orm";
import bcrypt from "bcryptjs";
import { MAX_LENGTHS } from "../../../lib/validation";
export const POST: APIRoute = async ({ request, locals, redirect }) => {
export const POST: APIRoute = async ({ request, locals, redirect, cookies }) => {
const user = locals.user;
const contentType = request.headers.get("content-type");
const isJson = contentType?.includes("application/json");
@@ -53,6 +54,13 @@ export const POST: APIRoute = async ({ request, locals, redirect }) => {
return new Response(msg, { status: 400 });
}
if (currentPassword.length > MAX_LENGTHS.password || newPassword.length > MAX_LENGTHS.password) {
const msg = `Password must be ${MAX_LENGTHS.password} characters or fewer`;
if (isJson)
return new Response(JSON.stringify({ error: msg }), { status: 400 });
return new Response(msg, { status: 400 });
}
try {
// Get current user from database
const dbUser = await db
@@ -90,6 +98,32 @@ export const POST: APIRoute = async ({ request, locals, redirect }) => {
.where(eq(users.id, user.id))
.run();
// Invalidate all sessions, then re-create one for the current user
const currentSessionId = cookies.get("session_id")?.value;
if (currentSessionId) {
await db
.delete(sessions)
.where(
eq(sessions.userId, user.id),
)
.run();
const { createSession } = await import("../../../lib/auth");
const { sessionId, expiresAt } = await createSession(user.id);
cookies.set("session_id", sessionId, {
path: "/",
httpOnly: true,
secure: import.meta.env.PROD,
sameSite: "lax",
expires: expiresAt,
});
} else {
await db
.delete(sessions)
.where(eq(sessions.userId, user.id))
.run();
}
if (isJson) {
return new Response(JSON.stringify({ success: true }), { status: 200 });
}

62
src/pages/dashboard/categories.astro
View File

@@ -1,62 +0,0 @@
---
import DashboardLayout from '../../layouts/DashboardLayout.astro';
import { db } from '../../db';
import { categories, members } from '../../db/schema';
import { eq } from 'drizzle-orm';
const user = Astro.locals.user;
if (!user) return Astro.redirect('/login');
// Get current team from cookie
const currentTeamId = Astro.cookies.get('currentTeamId')?.value;
const userMemberships = await db.select()
.from(members)
.where(eq(members.userId, user.id))
.all();
if (userMemberships.length === 0) return Astro.redirect('/dashboard');
// Use current team or fallback to first membership
const userMembership = currentTeamId
? userMemberships.find(m => m.organizationId === currentTeamId) || userMemberships[0]
: userMemberships[0];
const allCategories = await db.select()
.from(categories)
.where(eq(categories.organizationId, userMembership.organizationId))
.all();
---
<DashboardLayout title="Categories - Chronus">
<div class="flex justify-between items-center mb-6">
<h1 class="text-3xl font-bold">Categories</h1>
<a href="/dashboard/categories/new" class="btn btn-primary">Add Category</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{allCategories.map(category => (
<div class="card bg-base-200 shadow-xl border border-base-300">
<div class="card-body">
<h2 class="card-title">
{category.color && (
<span class="w-4 h-4 rounded-full" style={`background-color: ${category.color}`}></span>
)}
{category.name}
</h2>
<p class="text-xs text-base-content/60">Created {category.createdAt?.toLocaleDateString() ?? 'N/A'}</p>
<div class="card-actions justify-end mt-4">
<a href={`/dashboard/categories/${category.id}/edit`} class="btn btn-sm btn-primary">Edit</a>
</div>
</div>
</div>
))}
</div>
{allCategories.length === 0 && (
<div class="text-center py-12">
<p class="text-base-content/60 mb-4">No categories yet</p>
<a href="/dashboard/categories/new" class="btn btn-primary">Add Your First Category</a>
</div>
)}
</DashboardLayout>

99
src/pages/dashboard/categories/[id]/edit.astro
View File

@@ -1,99 +0,0 @@
---
import DashboardLayout from '../../../../layouts/DashboardLayout.astro';
import { Icon } from 'astro-icon/components';
import { db } from '../../../../db';
import { categories, members } from '../../../../db/schema';
import { eq, and } from 'drizzle-orm';
const user = Astro.locals.user;
if (!user) return Astro.redirect('/login');
const { id } = Astro.params;
// Get current team from cookie
const currentTeamId = Astro.cookies.get('currentTeamId')?.value;
const userMemberships = await db.select()
.from(members)
.where(eq(members.userId, user.id))
.all();
if (userMemberships.length === 0) return Astro.redirect('/dashboard');
// Use current team or fallback to first membership
const userMembership = currentTeamId
? userMemberships.find(m => m.organizationId === currentTeamId) || userMemberships[0]
: userMemberships[0];
const isAdmin = userMembership.role === 'owner' || userMembership.role === 'admin';
if (!isAdmin) return Astro.redirect('/dashboard/categories');
const category = await db.select()
.from(categories)
.where(and(
eq(categories.id, id!),
eq(categories.organizationId, userMembership.organizationId)
))
.get();
if (!category) return Astro.redirect('/dashboard/categories');
---
<DashboardLayout title="Edit Category - Chronus">
<div class="max-w-2xl mx-auto">
<div class="flex items-center gap-3 mb-6">
<a href="/dashboard/categories" class="btn btn-ghost btn-sm">
<Icon name="heroicons:arrow-left" class="w-5 h-5" />
</a>
<h1 class="text-3xl font-bold">Edit Category</h1>
</div>
<div class="card bg-base-200 shadow-xl border border-base-300">
<div class="card-body">
<form id="update-form" method="POST" action={`/api/categories/${id}/update`}>
<input type="hidden" name="redirectTo" value="/dashboard/categories" />
<div class="form-control">
<label class="label pb-2" for="name">
<span class="label-text font-medium">Category Name</span>
</label>
<input
type="text"
id="name"
name="name"
value={category.name}
placeholder="Development"
class="input input-bordered w-full"
required
/>
</div>
<div class="form-control mt-4">
<label class="label pb-2" for="color">
<span class="label-text font-medium">Color (optional)</span>
</label>
<input
type="color"
id="color"
name="color"
value={category.color || '#3b82f6'}
class="input input-bordered w-full h-12"
/>
</div>
</form>
<div class="card-actions justify-between mt-6">
<form method="POST" action={`/api/categories/${id}/delete`} onsubmit="return confirm('Are you sure you want to delete this category?');">
<input type="hidden" name="redirectTo" value="/dashboard/categories" />
<button type="submit" class="btn btn-error btn-outline">Delete Category</button>
</form>
<div class="flex gap-2">
<a href="/dashboard/categories" class="btn btn-ghost">Cancel</a>
<button type="submit" form="update-form" class="btn btn-primary">Save Changes</button>
</div>
</div>
</div>
</div>
</div>
</DashboardLayout>

54
src/pages/dashboard/categories/new.astro
View File

@@ -1,54 +0,0 @@
---
import DashboardLayout from '../../../layouts/DashboardLayout.astro';
import { Icon } from 'astro-icon/components';
const user = Astro.locals.user;
if (!user) return Astro.redirect('/login');
---
<DashboardLayout title="New Category - Chronus">
<div class="max-w-2xl mx-auto">
<div class="flex items-center gap-3 mb-6">
<a href="/dashboard/categories" class="btn btn-ghost btn-sm">
<Icon name="heroicons:arrow-left" class="w-5 h-5" />
</a>
<h1 class="text-3xl font-bold">Add New Category</h1>
</div>
<form method="POST" action="/api/categories/create" class="card bg-base-200 shadow-xl border border-base-300">
<input type="hidden" name="redirectTo" value="/dashboard/categories" />
<div class="card-body">
<div class="form-control">
<label class="label pb-2" for="name">
<span class="label-text font-medium">Category Name</span>
</label>
<input
type="text"
id="name"
name="name"
placeholder="Development"
class="input input-bordered w-full"
required
/>
</div>
<div class="form-control">
<label class="label pb-2" for="color">
<span class="label-text font-medium">Color (optional)</span>
</label>
<input
type="color"
id="color"
name="color"
class="input input-bordered w-full h-12"
/>
</div>
<div class="card-actions justify-end mt-6">
<a href="/dashboard/categories" class="btn btn-ghost">Cancel</a>
<button type="submit" class="btn btn-primary">Create Category</button>
</div>
</div>
</form>
</div>
</DashboardLayout>

49
src/pages/dashboard/clients.astro
View File

@@ -1,26 +1,15 @@
---
import DashboardLayout from '../../layouts/DashboardLayout.astro';
import { db } from '../../db';
import { clients, members } from '../../db/schema';
import { eq, and } from 'drizzle-orm';
import { clients } from '../../db/schema';
import { eq } from 'drizzle-orm';
import { getCurrentTeam } from '../../lib/getCurrentTeam';
const user = Astro.locals.user;
if (!user) return Astro.redirect('/login');
// Get current team from cookie
const currentTeamId = Astro.cookies.get('currentTeamId')?.value;
const userMemberships = await db.select()
.from(members)
.where(eq(members.userId, user.id))
.all();
if (userMemberships.length === 0) return Astro.redirect('/dashboard');
// Use current team or fallback to first membership
const userMembership = currentTeamId
? userMemberships.find(m => m.organizationId === currentTeamId) || userMemberships[0]
: userMemberships[0];
const userMembership = await getCurrentTeam(user, Astro.cookies.get('currentTeamId')?.value);
if (!userMembership) return Astro.redirect('/dashboard');
const organizationId = userMembership.organizationId;
@@ -32,20 +21,20 @@ const allClients = await db.select()
<DashboardLayout title="Clients - Chronus">
<div class="flex justify-between items-center mb-6">
<h1 class="text-3xl font-bold">Clients</h1>
<a href="/dashboard/clients/new" class="btn btn-primary">Add Client</a>
<h1 class="text-2xl font-extrabold tracking-tight">Clients</h1>
<a href="/dashboard/clients/new" class="btn btn-primary btn-sm">Add Client</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
{allClients.map(client => (
<div class="card bg-base-100 shadow-xl border border-base-200">
<div class="card-body">
<h2 class="card-title">{client.name}</h2>
{client.email && <p class="text-sm text-gray-500">{client.email}</p>}
<p class="text-xs text-gray-400">Created {client.createdAt?.toLocaleDateString() ?? 'N/A'}</p>
<div class="card-actions justify-end mt-4">
<a href={`/dashboard/clients/${client.id}`} class="btn btn-sm btn-ghost">View</a>
<a href={`/dashboard/clients/${client.id}/edit`} class="btn btn-sm btn-primary">Edit</a>
<div class="card card-border bg-base-100">
<div class="card-body p-4 gap-1">
<h2 class="font-semibold">{client.name}</h2>
{client.email && <p class="text-sm text-base-content/60">{client.email}</p>}
<p class="text-xs text-base-content/40">Created {client.createdAt?.toLocaleDateString() ?? 'N/A'}</p>
<div class="card-actions justify-end mt-3">
<a href={`/dashboard/clients/${client.id}`} class="btn btn-xs btn-ghost">View</a>
<a href={`/dashboard/clients/${client.id}/edit`} class="btn btn-xs btn-primary">Edit</a>
</div>
</div>
</div>
@@ -53,9 +42,9 @@ const allClients = await db.select()
</div>
{allClients.length === 0 && (
<div class="text-center py-12">
<p class="text-gray-500 mb-4">No clients yet</p>
<a href="/dashboard/clients/new" class="btn btn-primary">Add Your First Client</a>
<div class="flex flex-col items-center justify-center py-12 text-center">
<p class="text-base-content/50 text-sm mb-4">No clients yet</p>
<a href="/dashboard/clients/new" class="btn btn-primary btn-sm">Add Your First Client</a>
</div>
)}
</DashboardLayout>

131
src/pages/dashboard/clients/[id]/edit.astro
View File

@@ -2,8 +2,9 @@
import DashboardLayout from '../../../../layouts/DashboardLayout.astro';
import { Icon } from 'astro-icon/components';
import { db } from '../../../../db';
import { clients, members } from '../../../../db/schema';
import { clients } from '../../../../db/schema';
import { eq, and } from 'drizzle-orm';
import { getCurrentTeam } from '../../../../lib/getCurrentTeam';
const user = Astro.locals.user;
if (!user) return Astro.redirect('/login');
@@ -11,20 +12,8 @@ if (!user) return Astro.redirect('/login');
const { id } = Astro.params;
if (!id) return Astro.redirect('/dashboard/clients');
// Get current team from cookie
const currentTeamId = Astro.cookies.get('currentTeamId')?.value;
const userMemberships = await db.select()
.from(members)
.where(eq(members.userId, user.id))
.all();
if (userMemberships.length === 0) return Astro.redirect('/dashboard');
// Use current team or fallback to first membership
const userMembership = currentTeamId
? userMemberships.find(m => m.organizationId === currentTeamId) || userMemberships[0]
: userMemberships[0];
const userMembership = await getCurrentTeam(user, Astro.cookies.get('currentTeamId')?.value);
if (!userMembership) return Astro.redirect('/dashboard');
const client = await db.select()
.from(clients)
@@ -40,145 +29,129 @@ if (!client) return Astro.redirect('/dashboard/clients');
<DashboardLayout title={`Edit ${client.name} - Chronus`}>
<div class="max-w-2xl mx-auto">
<div class="flex items-center gap-3 mb-6">
<a href={`/dashboard/clients/${client.id}`} class="btn btn-ghost btn-sm">
<Icon name="heroicons:arrow-left" class="w-5 h-5" />
<a href={`/dashboard/clients/${client.id}`} class="btn btn-ghost btn-xs">
<Icon name="heroicons:arrow-left" class="w-4 h-4" />
</a>
<h1 class="text-3xl font-bold">Edit Client</h1>
<h1 class="text-2xl font-extrabold tracking-tight">Edit Client</h1>
</div>
<form method="POST" action={`/api/clients/${client.id}/update`} class="card bg-base-100 shadow-xl border border-base-200">
<div class="card-body">
<div class="form-control">
<label class="label" for="name">
<span class="label-text">Client Name</span>
</label>
<form method="POST" action={`/api/clients/${client.id}/update`} class="card card-border bg-base-100">
<div class="card-body p-4">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Client Name</legend>
<input
type="text"
id="name"
name="name"
value={client.name}
placeholder="Acme Corp"
class="input input-bordered w-full"
class="input w-full"
required
/>
</div>
</fieldset>
<div class="form-control">
<label class="label" for="email">
<span class="label-text">Email (optional)</span>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Email (optional)</legend>
<input
type="email"
id="email"
name="email"
value={client.email || ''}
placeholder="jason.borne@cia.com"
class="input input-bordered w-full"
class="input w-full"
/>
</div>
</fieldset>
<div class="form-control">
<label class="label" for="phone">
<span class="label-text">Phone (optional)</span>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Phone (optional)</legend>
<input
type="tel"
id="phone"
name="phone"
value={client.phone || ''}
placeholder="+1 (780) 420-1337"
class="input input-bordered w-full"
class="input w-full"
/>
</div>
</fieldset>
<div class="divider">Address Details</div>
<div class="divider text-xs text-base-content/40">Address Details</div>
<div class="form-control">
<label class="label" for="street">
<span class="label-text">Street Address (optional)</span>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Street Address (optional)</legend>
<input
type="text"
id="street"
name="street"
value={client.street || ''}
placeholder="123 Business Rd"
class="input input-bordered w-full"
class="input w-full"
/>
</div>
</fieldset>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="form-control">
<label class="label" for="city">
<span class="label-text">City (optional)</span>
</label>
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">City (optional)</legend>
<input
type="text"
id="city"
name="city"
value={client.city || ''}
placeholder="Edmonton"
class="input input-bordered w-full"
class="input w-full"
/>
</div>
</fieldset>
<div class="form-control">
<label class="label" for="state">
<span class="label-text">State / Province (optional)</span>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">State / Province (optional)</legend>
<input
type="text"
id="state"
name="state"
value={client.state || ''}
placeholder="AB"
class="input input-bordered w-full"
class="input w-full"
/>
</div>
</fieldset>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="form-control">
<label class="label" for="zip">
<span class="label-text">Zip / Postal Code (optional)</span>
</label>
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Zip / Postal Code (optional)</legend>
<input
type="text"
id="zip"
name="zip"
value={client.zip || ''}
placeholder="10001"
class="input input-bordered w-full"
class="input w-full"
/>
</div>
</fieldset>
<div class="form-control">
<label class="label" for="country">
<span class="label-text">Country (optional)</span>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Country (optional)</legend>
<input
type="text"
id="country"
name="country"
value={client.country || ''}
placeholder="Canada"
class="input input-bordered w-full"
class="input w-full"
/>
</div>
</fieldset>
</div>
<div class="card-actions justify-between mt-6">
<div class="flex justify-between items-center mt-4">
<button
type="button"
class="btn btn-error btn-outline"
class="btn btn-error btn-outline btn-sm"
onclick={`document.getElementById('delete_modal').showModal()`}
>
Delete Client
</button>
<div class="flex gap-2">
<a href={`/dashboard/clients/${client.id}`} class="btn btn-ghost">Cancel</a>
<button type="submit" class="btn btn-primary">Save Changes</button>
<a href={`/dashboard/clients/${client.id}`} class="btn btn-ghost btn-sm">Cancel</a>
<button type="submit" class="btn btn-primary btn-sm">Save Changes</button>
</div>
</div>
</div>
@@ -188,17 +161,17 @@ if (!client) return Astro.redirect('/dashboard/clients');
<!-- Delete Confirmation Modal -->
<dialog id="delete_modal" class="modal">
<div class="modal-box">
<h3 class="font-bold text-lg text-error">Delete Client?</h3>
<p class="py-4">
<h3 class="font-semibold text-base text-error">Delete Client?</h3>
<p class="py-4 text-sm">
Are you sure you want to delete <strong>{client.name}</strong>?
This action cannot be undone and will delete all associated time entries.
</p>
<div class="modal-action">
<form method="dialog">
<button class="btn">Cancel</button>
<button class="btn btn-sm">Cancel</button>
</form>
<form method="POST" action={`/api/clients/${client.id}/delete`}>
<button type="submit" class="btn btn-error">Delete</button>
<button type="submit" class="btn btn-error btn-sm">Delete</button>
</form>
</div>
</div>

137
src/pages/dashboard/clients/[id]/index.astro
View File

@@ -2,9 +2,11 @@
import DashboardLayout from '../../../../layouts/DashboardLayout.astro';
import { Icon } from 'astro-icon/components';
import { db } from '../../../../db';
import { clients, timeEntries, members, categories, users } from '../../../../db/schema';
import { clients, timeEntries, tags, users } from '../../../../db/schema';
import { eq, and, desc, sql } from 'drizzle-orm';
import { formatTimeRange } from '../../../../lib/formatTime';
import { getCurrentTeam } from '../../../../lib/getCurrentTeam';
import StatCard from '../../../../components/StatCard.astro';
const user = Astro.locals.user;
if (!user) return Astro.redirect('/login');
@@ -12,20 +14,8 @@ if (!user) return Astro.redirect('/login');
const { id } = Astro.params;
if (!id) return Astro.redirect('/dashboard/clients');
// Get current team from cookie
const currentTeamId = Astro.cookies.get('currentTeamId')?.value;
const userMemberships = await db.select()
.from(members)
.where(eq(members.userId, user.id))
.all();
if (userMemberships.length === 0) return Astro.redirect('/dashboard');
// Use current team or fallback to first membership
const userMembership = currentTeamId
? userMemberships.find(m => m.organizationId === currentTeamId) || userMemberships[0]
: userMemberships[0];
const userMembership = await getCurrentTeam(user, Astro.cookies.get('currentTeamId')?.value);
if (!userMembership) return Astro.redirect('/dashboard');
const client = await db.select()
.from(clients)
@@ -40,12 +30,12 @@ if (!client) return Astro.redirect('/dashboard/clients');
// Get recent activity
const recentEntries = await db.select({
entry: timeEntries,
category: categories,
user: users,
tag: tags,
})
.from(timeEntries)
.leftJoin(categories, eq(timeEntries.categoryId, categories.id))
.leftJoin(users, eq(timeEntries.userId, users.id))
.leftJoin(tags, eq(timeEntries.tagId, tags.id))
.where(eq(timeEntries.clientId, client.id))
.orderBy(desc(timeEntries.startTime))
.limit(10)
@@ -73,34 +63,34 @@ const totalEntriesCount = totalEntriesResult?.count || 0;
<DashboardLayout title={`${client.name} - Clients - Chronus`}>
<div class="flex items-center gap-3 mb-6">
<a href="/dashboard/clients" class="btn btn-ghost btn-sm">
<Icon name="heroicons:arrow-left" class="w-5 h-5" />
<a href="/dashboard/clients" class="btn btn-ghost btn-xs">
<Icon name="heroicons:arrow-left" class="w-4 h-4" />
</a>
<h1 class="text-3xl font-bold">{client.name}</h1>
<h1 class="text-2xl font-extrabold tracking-tight">{client.name}</h1>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-3 mb-6">
<!-- Client Details Card -->
<div class="card bg-base-100 shadow-xl border border-base-200 lg:col-span-2">
<div class="card-body">
<div class="card card-border bg-base-100 lg:col-span-2">
<div class="card-body p-4">
<div class="flex justify-between items-start">
<div>
<h2 class="card-title text-2xl mb-1">{client.name}</h2>
<h2 class="text-sm font-semibold mb-3">{client.name}</h2>
<div class="space-y-2 mb-4">
{client.email && (
<div class="flex items-center gap-2 text-base-content/70">
<div class="flex items-center gap-2 text-base-content/60 text-sm">
<Icon name="heroicons:envelope" class="w-4 h-4" />
<a href={`mailto:${client.email}`} class="link link-hover">{client.email}</a>
</div>
)}
{client.phone && (
<div class="flex items-center gap-2 text-base-content/70">
<div class="flex items-center gap-2 text-base-content/60 text-sm">
<Icon name="heroicons:phone" class="w-4 h-4" />
<a href={`tel:${client.phone}`} class="link link-hover">{client.phone}</a>
</div>
)}
{(client.street || client.city || client.state || client.zip || client.country) && (
<div class="flex items-start gap-2 text-base-content/70">
<div class="flex items-start gap-2 text-base-content/60">
<Icon name="heroicons:map-pin" class="w-4 h-4 mt-0.5" />
<div class="text-sm space-y-0.5">
{client.street && <div>{client.street}</div>}
@@ -116,91 +106,90 @@ const totalEntriesCount = totalEntriesResult?.count || 0;
</div>
</div>
<div class="flex gap-2">
<a href={`/dashboard/clients/${client.id}/edit`} class="btn btn-primary btn-sm">
<Icon name="heroicons:pencil" class="w-4 h-4" />
<a href={`/dashboard/clients/${client.id}/edit`} class="btn btn-primary btn-xs">
<Icon name="heroicons:pencil" class="w-3 h-3" />
Edit
</a>
<form method="POST" action={`/api/clients/${client.id}/delete`} onsubmit="return confirm('Are you sure you want to delete this client? This will also delete all associated time entries.');">
<button type="submit" class="btn btn-error btn-outline btn-sm">
<Icon name="heroicons:trash" class="w-4 h-4" />
<button type="submit" class="btn btn-error btn-outline btn-xs">
<Icon name="heroicons:trash" class="w-3 h-3" />
Delete
</button>
</form>
</div>
</div>
<div class="divider"></div>
<div class="divider my-2"></div>
<div class="stats shadow w-full">
<div class="stat">
<div class="stat-figure text-primary">
<Icon name="heroicons:clock" class="w-8 h-8" />
</div>
<div class="stat-title">Total Time Tracked</div>
<div class="stat-value text-primary">{totalHours}h {totalMinutes}m</div>
<div class="stat-desc">Across all projects</div>
</div>
<div class="stat">
<div class="stat-figure text-secondary">
<Icon name="heroicons:list-bullet" class="w-8 h-8" />
</div>
<div class="stat-title">Total Entries</div>
<div class="stat-value text-secondary">{totalEntriesCount}</div>
<div class="stat-desc">Recorded entries</div>
</div>
<div class="grid grid-cols-2 gap-3">
<StatCard
title="Total Time Tracked"
value={`${totalHours}h ${totalMinutes}m`}
description="Across all projects"
icon="heroicons:clock"
color="text-primary"
/>
<StatCard
title="Total Entries"
value={String(totalEntriesCount)}
description="Recorded entries"
icon="heroicons:list-bullet"
color="text-secondary"
/>
</div>
</div>
</div>
<!-- Meta Info Card -->
<div class="card bg-base-100 shadow-xl border border-base-200 h-fit">
<div class="card-body">
<h3 class="card-title text-lg mb-4">Information</h3>
<div class="card card-border bg-base-100 h-fit">
<div class="card-body p-4">
<h3 class="text-sm font-semibold mb-3">Information</h3>
<div class="space-y-4">
<div class="space-y-3">
<div>
<div class="text-sm font-medium text-base-content/60">Created</div>
<div>{client.createdAt?.toLocaleDateString() ?? 'N/A'}</div>
<div class="text-xs text-base-content/40">Created</div>
<div class="text-sm">{client.createdAt?.toLocaleDateString() ?? 'N/A'}</div>
</div>
</div>
</div>
</div>
</div>
<!-- Recent Activity -->
<div class="card bg-base-100 shadow-xl border border-base-200">
<div class="card-body">
<h2 class="card-title mb-4">Recent Activity</h2>
<div class="card card-border bg-base-100">
<div class="card-body p-0">
<div class="px-4 py-3 border-b border-base-200">
<h2 class="text-sm font-semibold">Recent Activity</h2>
</div>
{recentEntries.length > 0 ? (
<div class="overflow-x-auto">
<table class="table">
<table class="table table-sm">
<thead>
<tr>
<th>Description</th>
<th>Category</th>
<th>Tag</th>
<th>User</th>
<th>Date</th>
<th>Duration</th>
</tr>
</thead>
<tbody>
{recentEntries.map(({ entry, category, user: entryUser }) => (
<tr>
{recentEntries.map(({ entry, tag, user: entryUser }) => (
<tr class="hover">
<td>{entry.description || '-'}</td>
<td>
{category ? (
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full" style={`background-color: ${category.color}`}></span>
<span>{category.name}</span>
{tag ? (
<div class="badge badge-xs badge-outline flex items-center gap-1">
{tag.color && (
<span class="w-2 h-2 rounded-full" style={`background-color: ${tag.color}`}></span>
)}
<span>{tag.name}</span>
</div>
) : '-'}
</td>
<td>{entryUser?.name || 'Unknown'}</td>
<td>{entry.startTime.toLocaleDateString()}</td>
<td class="text-base-content/60">{entryUser?.name || 'Unknown'}</td>
<td class="text-base-content/40">{entry.startTime.toLocaleDateString()}</td>
<td class="font-mono">{formatTimeRange(entry.startTime, entry.endTime)}</td>
</tr>
))}
@@ -208,14 +197,14 @@ const totalEntriesCount = totalEntriesResult?.count || 0;
</table>
</div>
) : (
<div class="text-center py-8 text-base-content/60">
<div class="text-center py-8 text-base-content/40 text-sm">
No time entries recorded for this client yet.
</div>
)}
{recentEntries.length > 0 && (
<div class="card-actions justify-center mt-4">
<a href={`/dashboard/tracker?client=${client.id}`} class="btn btn-ghost btn-sm">
<div class="flex justify-center py-3 border-t border-base-200">
<a href={`/dashboard/tracker?client=${client.id}`} class="btn btn-ghost btn-xs">
View All Entries
</a>
</div>

98
src/pages/dashboard/clients/new.astro
View File

@@ -7,124 +7,108 @@ if (!user) return Astro.redirect('/login');
<DashboardLayout title="New Client - Chronus">
<div class="max-w-2xl mx-auto">
<h1 class="text-3xl font-bold mb-6">Add New Client</h1>
<h1 class="text-2xl font-extrabold tracking-tight mb-6">Add New Client</h1>
<form method="POST" action="/api/clients/create" class="card bg-base-100 shadow-xl border border-base-200">
<div class="card-body">
<div class="form-control">
<label class="label" for="name">
<span class="label-text">Client Name</span>
</label>
<form method="POST" action="/api/clients/create" class="card card-border bg-base-100">
<div class="card-body p-4">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Client Name</legend>
<input
type="text"
id="name"
name="name"
placeholder="Acme Corp"
class="input input-bordered w-full"
class="input w-full"
required
/>
</div>
</fieldset>
<div class="form-control">
<label class="label" for="email">
<span class="label-text">Email (optional)</span>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Email (optional)</legend>
<input
type="email"
id="email"
name="email"
placeholder="jason.borne@cia.com"
class="input input-bordered w-full"
class="input w-full"
/>
</div>
</fieldset>
<div class="form-control">
<label class="label" for="phone">
<span class="label-text">Phone (optional)</span>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Phone (optional)</legend>
<input
type="tel"
id="phone"
name="phone"
placeholder="+1 (780) 420-1337"
class="input input-bordered w-full"
class="input w-full"
/>
</div>
</fieldset>
<div class="divider">Address Details</div>
<div class="divider text-xs text-base-content/40">Address Details</div>
<div class="form-control">
<label class="label" for="street">
<span class="label-text">Street Address (optional)</span>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Street Address (optional)</legend>
<input
type="text"
id="street"
name="street"
placeholder="123 Business Rd"
class="input input-bordered w-full"
class="input w-full"
/>
</div>
</fieldset>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="form-control">
<label class="label" for="city">
<span class="label-text">City (optional)</span>
</label>
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">City (optional)</legend>
<input
type="text"
id="city"
name="city"
placeholder="Edmonton"
class="input input-bordered w-full"
class="input w-full"
/>
</div>
</fieldset>
<div class="form-control">
<label class="label" for="state">
<span class="label-text">State / Province (optional)</span>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">State / Province (optional)</legend>
<input
type="text"
id="state"
name="state"
placeholder="AB"
class="input input-bordered w-full"
class="input w-full"
/>
</div>
</fieldset>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="form-control">
<label class="label" for="zip">
<span class="label-text">Zip / Postal Code (optional)</span>
</label>
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Zip / Postal Code (optional)</legend>
<input
type="text"
id="zip"
name="zip"
placeholder="10001"
class="input input-bordered w-full"
class="input w-full"
/>
</div>
</fieldset>
<div class="form-control">
<label class="label" for="country">
<span class="label-text">Country (optional)</span>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Country (optional)</legend>
<input
type="text"
id="country"
name="country"
placeholder="Canada"
class="input input-bordered w-full"
class="input w-full"
/>
</div>
</fieldset>
</div>
<div class="card-actions justify-end mt-6">
<a href="/dashboard/clients" class="btn btn-ghost">Cancel</a>
<button type="submit" class="btn btn-primary">Create Client</button>
<div class="flex justify-end gap-2 mt-4">
<a href="/dashboard/clients" class="btn btn-ghost btn-sm">Cancel</a>
<button type="submit" class="btn btn-primary btn-sm">Create Client</button>
</div>
</div>
</form>

143
src/pages/dashboard/index.astro
View File

@@ -1,8 +1,9 @@
---
import DashboardLayout from '../../layouts/DashboardLayout.astro';
import { Icon } from 'astro-icon/components';
import StatCard from '../../components/StatCard.astro';
import { db } from '../../db';
import { organizations, members, timeEntries, clients, categories } from '../../db/schema';
import { organizations, members, timeEntries, clients, tags } from '../../db/schema';
import { eq, desc, and, isNull, gte, sql } from 'drizzle-orm';
import { formatDuration } from '../../lib/formatTime';
@@ -87,11 +88,11 @@ if (currentOrg) {
stats.recentEntries = await db.select({
entry: timeEntries,
client: clients,
category: categories,
tag: tags,
})
.from(timeEntries)
.innerJoin(clients, eq(timeEntries.clientId, clients.id))
.innerJoin(categories, eq(timeEntries.categoryId, categories.id))
.leftJoin(tags, eq(timeEntries.tagId, tags.id))
.where(eq(timeEntries.organizationId, currentOrg.organizationId))
.orderBy(desc(timeEntries.startTime))
.limit(5)
@@ -103,25 +104,25 @@ const hasMembership = userOrgs.length > 0;
---
<DashboardLayout title="Dashboard - Chronus">
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 sm:gap-0 mb-8">
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 sm:gap-0 mb-6">
<div>
<h1 class="text-4xl font-bold text-primary mb-2">
<h1 class="text-2xl font-extrabold tracking-tight">
Dashboard
</h1>
<p class="text-base-content/60">Welcome back, {user.name}!</p>
<p class="text-base-content/60 text-sm mt-1">Welcome back, {user.name}!</p>
</div>
<a href="/dashboard/organizations/new" class="btn btn-outline">
<Icon name="heroicons:plus" class="w-5 h-5" />
<a href="/dashboard/organizations/new" class="btn btn-ghost btn-sm">
<Icon name="heroicons:plus" class="w-4 h-4" />
New Team
</a>
</div>
{!hasMembership && (
<div class="alert alert-info mb-8">
<Icon name="heroicons:information-circle" class="w-6 h-6" />
<div class="alert alert-info mb-6 text-sm">
<Icon name="heroicons:information-circle" class="w-5 h-5" />
<div>
<h3 class="font-bold">Welcome to Chronus!</h3>
<div class="text-sm">You're not part of any team yet. Create one or wait for an invitation.</div>
<div class="text-xs">You're not part of any team yet. Create one or wait for an invitation.</div>
</div>
<a href="/dashboard/organizations/new" class="btn btn-primary btn-sm">
<Icon name="heroicons:plus" class="w-4 h-4" />
@@ -133,63 +134,56 @@ const hasMembership = userOrgs.length > 0;
{hasMembership && (
<>
<!-- Stats Overview -->
<div class="stats stats-vertical lg:stats-horizontal shadow-lg w-full mb-8">
<div class="stat">
<div class="stat-figure text-primary">
<Icon name="heroicons:clock" class="w-8 h-8" />
</div>
<div class="stat-title">This Week</div>
<div class="stat-value text-primary text-3xl">{formatDuration(stats.totalTimeThisWeek)}</div>
<div class="stat-desc">Total tracked time</div>
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-6">
<StatCard
title="This Week"
value={formatDuration(stats.totalTimeThisWeek)}
description="Total tracked time"
icon="heroicons:clock"
color="text-primary"
/>
<StatCard
title="This Month"
value={formatDuration(stats.totalTimeThisMonth)}
description="Total tracked time"
icon="heroicons:calendar"
color="text-secondary"
/>
<StatCard
title="Active Timers"
value={String(stats.activeTimers)}
description="Currently running"
icon="heroicons:play-circle"
color="text-accent"
/>
<StatCard
title="Clients"
value={String(stats.totalClients)}
description="Total active"
icon="heroicons:building-office"
color="text-info"
/>
</div>
<div class="stat">
<div class="stat-figure text-secondary">
<Icon name="heroicons:calendar" class="w-8 h-8" />
</div>
<div class="stat-title">This Month</div>
<div class="stat-value text-secondary text-3xl">{formatDuration(stats.totalTimeThisMonth)}</div>
<div class="stat-desc">Total tracked time</div>
</div>
<div class="stat">
<div class="stat-figure text-accent">
<Icon name="heroicons:play-circle" class="w-8 h-8" />
</div>
<div class="stat-title">Active Timers</div>
<div class="stat-value text-accent text-3xl">{stats.activeTimers}</div>
<div class="stat-desc">Currently running</div>
</div>
<div class="stat">
<div class="stat-figure text-info">
<Icon name="heroicons:building-office" class="w-8 h-8" />
</div>
<div class="stat-title">Clients</div>
<div class="stat-value text-info text-3xl">{stats.totalClients}</div>
<div class="stat-desc">Total active</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<!-- Quick Actions -->
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title">
<Icon name="heroicons:bolt" class="w-6 h-6 text-warning" />
<div class="card card-border bg-base-100">
<div class="card-body p-4">
<h2 class="text-sm font-semibold flex items-center gap-2">
<Icon name="heroicons:bolt" class="w-4 h-4 text-warning" />
Quick Actions
</h2>
<div class="flex flex-col gap-3 mt-4">
<a href="/dashboard/tracker" class="btn btn-primary">
<Icon name="heroicons:play" class="w-5 h-5" />
<div class="flex flex-col gap-2 mt-3">
<a href="/dashboard/tracker" class="btn btn-primary btn-sm">
<Icon name="heroicons:play" class="w-4 h-4" />
Start Timer
</a>
<a href="/dashboard/clients/new" class="btn btn-outline">
<Icon name="heroicons:plus" class="w-5 h-5" />
<a href="/dashboard/clients/new" class="btn btn-ghost btn-sm">
<Icon name="heroicons:plus" class="w-4 h-4" />
Add Client
</a>
<a href="/dashboard/reports" class="btn btn-outline">
<Icon name="heroicons:chart-bar" class="w-5 h-5" />
<a href="/dashboard/reports" class="btn btn-ghost btn-sm">
<Icon name="heroicons:chart-bar" class="w-4 h-4" />
View Reports
</a>
</div>
@@ -197,27 +191,32 @@ const hasMembership = userOrgs.length > 0;
</div>
<!-- Recent Activity -->
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title">
<Icon name="heroicons:clock" class="w-6 h-6 text-success" />
<div class="card card-border bg-base-100">
<div class="card-body p-4">
<h2 class="text-sm font-semibold flex items-center gap-2">
<Icon name="heroicons:clock" class="w-4 h-4 text-success" />
Recent Activity
</h2>
{stats.recentEntries.length > 0 ? (
<ul class="space-y-3 mt-4">
{stats.recentEntries.map(({ entry, client, category }) => (
<li class="p-3 rounded-lg bg-base-200 border-l-4 hover:bg-base-300 transition-colors" style={`border-color: ${category.color || '#3b82f6'}`}>
<div class="font-semibold text-sm">{client.name}</div>
<div class="text-xs text-base-content/60 mt-1">
{category.name} • {entry.endTime ? formatDuration(entry.endTime.getTime() - entry.startTime.getTime()) : 'Running...'}
<ul class="space-y-2 mt-3">
{stats.recentEntries.map(({ entry, client, tag }) => (
<li class="p-2.5 rounded-lg bg-base-200/50 border-l-3 hover:bg-base-200 transition-colors" style={`border-color: ${tag?.color || 'oklch(var(--p))'}`}>
<div class="font-medium text-sm">{client.name}</div>
<div class="text-xs text-base-content/50 mt-0.5 flex flex-wrap gap-2 items-center">
<span class="flex gap-1 flex-wrap">
{tag ? (
<span class="badge badge-xs badge-outline">{tag.name}</span>
) : <span class="italic opacity-50">No tag</span>}
</span>
<span>· {entry.endTime ? formatDuration(entry.endTime.getTime() - entry.startTime.getTime()) : 'Running...'}</span>
</div>
</li>
))}
</ul>
) : (
<div class="flex flex-col items-center justify-center py-8 text-center mt-4">
<Icon name="heroicons:clock" class="w-12 h-12 text-base-content/20 mb-3" />
<p class="text-base-content/60 text-sm">No recent time entries</p>
<div class="flex flex-col items-center justify-center py-6 text-center mt-3">
<Icon name="heroicons:clock" class="w-10 h-10 text-base-content/15 mb-2" />
<p class="text-base-content/40 text-sm">No recent time entries</p>
</div>
)}
</div>

125
src/pages/dashboard/invoices/[id].astro
View File

@@ -4,6 +4,7 @@ import { Icon } from 'astro-icon/components';
import { db } from '../../../db';
import { invoices, invoiceItems, clients, members, organizations } from '../../../db/schema';
import { eq, and } from 'drizzle-orm';
import { formatCurrency } from '../../../lib/formatTime';
const { id } = Astro.params;
const user = Astro.locals.user;
@@ -49,13 +50,6 @@ const items = await db.select()
.where(eq(invoiceItems.invoiceId, invoice.id))
.all();
const formatCurrency = (amount: number) => {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: invoice.currency,
}).format(amount / 100);
};
const isDraft = invoice.status === 'draft';
---
@@ -68,7 +62,7 @@ const isDraft = invoice.status === 'draft';
<a href="/dashboard/invoices" class="btn btn-ghost btn-xs btn-square">
<Icon name="heroicons:arrow-left" class="w-4 h-4" />
</a>
<div class={`badge ${
<div class={`badge badge-xs ${
invoice.status === 'paid' || invoice.status === 'accepted' ? 'badge-success' :
invoice.status === 'sent' ? 'badge-info' :
invoice.status === 'void' || invoice.status === 'declined' ? 'badge-error' :
@@ -77,15 +71,15 @@ const isDraft = invoice.status === 'draft';
{invoice.status}
</div>
</div>
<h1 class="text-3xl font-bold">{invoice.number}</h1>
<h1 class="text-2xl font-extrabold tracking-tight">{invoice.number}</h1>
</div>
<div class="flex gap-2">
{isDraft && (
<form method="POST" action={`/api/invoices/${invoice.id}/status`}>
<input type="hidden" name="status" value="sent" />
<button type="submit" class="btn btn-primary">
<Icon name="heroicons:paper-airplane" class="w-5 h-5" />
<button type="submit" class="btn btn-primary btn-sm">
<Icon name="heroicons:paper-airplane" class="w-4 h-4" />
Mark Sent
</button>
</form>
@@ -93,8 +87,8 @@ const isDraft = invoice.status === 'draft';
{(invoice.status !== 'paid' && invoice.status !== 'void' && invoice.type === 'invoice') && (
<form method="POST" action={`/api/invoices/${invoice.id}/status`}>
<input type="hidden" name="status" value="paid" />
<button type="submit" class="btn btn-success">
<Icon name="heroicons:check" class="w-5 h-5" />
<button type="submit" class="btn btn-success btn-sm">
<Icon name="heroicons:check" class="w-4 h-4" />
Mark Paid
</button>
</form>
@@ -102,25 +96,25 @@ const isDraft = invoice.status === 'draft';
{(invoice.status !== 'accepted' && invoice.status !== 'declined' && invoice.status !== 'void' && invoice.type === 'quote') && (
<form method="POST" action={`/api/invoices/${invoice.id}/status`}>
<input type="hidden" name="status" value="accepted" />
<button type="submit" class="btn btn-success">
<Icon name="heroicons:check" class="w-5 h-5" />
<button type="submit" class="btn btn-success btn-sm">
<Icon name="heroicons:check" class="w-4 h-4" />
Mark Accepted
</button>
</form>
)}
{(invoice.type === 'quote' && invoice.status === 'accepted') && (
<form method="POST" action={`/api/invoices/${invoice.id}/convert`}>
<button type="submit" class="btn btn-primary">
<Icon name="heroicons:document-duplicate" class="w-5 h-5" />
<button type="submit" class="btn btn-primary btn-sm">
<Icon name="heroicons:document-duplicate" class="w-4 h-4" />
Convert to Invoice
</button>
</form>
)}
<div class="dropdown dropdown-end">
<div role="button" tabindex="0" class="btn btn-square btn-ghost border border-base-300">
<Icon name="heroicons:ellipsis-horizontal" class="w-6 h-6" />
<div role="button" tabindex="0" class="btn btn-square btn-ghost btn-sm border border-base-200">
<Icon name="heroicons:ellipsis-horizontal" class="w-4 h-4" />
</div>
<ul tabindex="0" class="dropdown-content z-1 menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-200">
<ul tabindex="0" class="dropdown-content z-1 menu p-2 bg-base-100 rounded-box w-52 border border-base-200">
<li>
<a href={`/dashboard/invoices/${invoice.id}/edit`}>
<Icon name="heroicons:pencil-square" class="w-4 h-4" />
@@ -159,7 +153,7 @@ const isDraft = invoice.status === 'draft';
</div>
<!-- Invoice Paper -->
<div class="card bg-base-100 shadow-xl border border-base-200 print:shadow-none print:border-none">
<div class="card card-border bg-base-100 print:shadow-none print:border-none">
<div class="card-body p-8 sm:p-12">
<!-- Header Section -->
<div class="flex flex-col sm:flex-row justify-between gap-8 mb-12">
@@ -235,8 +229,8 @@ const isDraft = invoice.status === 'draft';
<tr>
<td class="py-4">{item.description}</td>
<td class="py-4 text-right">{item.quantity}</td>
<td class="py-4 text-right">{formatCurrency(item.unitPrice)}</td>
<td class="py-4 text-right font-medium">{formatCurrency(item.amount)}</td>
<td class="py-4 text-right">{formatCurrency(item.unitPrice, invoice.currency)}</td>
<td class="py-4 text-right font-medium">{formatCurrency(item.amount, invoice.currency)}</td>
{isDraft && (
<td class="py-4 text-right">
<form method="POST" action={`/api/invoices/${invoice.id}/items/delete`}>
@@ -263,20 +257,27 @@ const isDraft = invoice.status === 'draft';
<!-- Add Item Form (Only if Draft) -->
{isDraft && (
<form method="POST" action={`/api/invoices/${invoice.id}/items/add`} class="bg-base-200/50 p-4 rounded-lg mb-8 border border-base-300/50">
<h4 class="text-sm font-bold mb-3">Add Item</h4>
<div class="grid grid-cols-1 sm:grid-cols-12 gap-4 items-end">
<div class="flex justify-end mb-4">
<button onclick="document.getElementById('import_time_modal').showModal()" class="btn btn-sm btn-outline gap-2">
<Icon name="heroicons:clock" class="w-4 h-4" />
Import Time
</button>
</div>
<form method="POST" action={`/api/invoices/${invoice.id}/items/add`} class="bg-base-200/50 p-4 rounded-lg mb-8 border border-base-200">
<h4 class="text-xs font-semibold mb-3">Add Item</h4>
<div class="grid grid-cols-1 sm:grid-cols-12 gap-3 items-end">
<div class="sm:col-span-6">
<label class="label label-text text-xs pt-0">Description</label>
<input type="text" name="description" class="input input-sm input-bordered w-full" required placeholder="Service or product..." />
<label class="text-xs text-base-content/60" for="item-description">Description</label>
<input type="text" id="item-description" name="description" class="input input-sm w-full" required placeholder="Service or product..." />
</div>
<div class="sm:col-span-2">
<label class="label label-text text-xs pt-0">Qty</label>
<input type="number" name="quantity" step="0.01" class="input input-sm input-bordered w-full" required value="1" />
<label class="text-xs text-base-content/60" for="item-quantity">Qty</label>
<input type="number" id="item-quantity" name="quantity" step="0.01" class="input input-sm w-full" required value="1" />
</div>
<div class="sm:col-span-3">
<label class="label label-text text-xs pt-0">Unit Price ({invoice.currency})</label>
<input type="number" name="unitPrice" step="0.01" class="input input-sm input-bordered w-full" required placeholder="0.00" />
<label class="text-xs text-base-content/60" for="item-unit-price">Unit Price ({invoice.currency})</label>
<input type="number" id="item-unit-price" name="unitPrice" step="0.01" class="input input-sm w-full" required placeholder="0.00" />
</div>
<div class="sm:col-span-1">
<button type="submit" class="btn btn-sm btn-primary w-full">
@@ -292,7 +293,7 @@ const isDraft = invoice.status === 'draft';
<div class="w-64 space-y-3">
<div class="flex justify-between text-sm">
<span class="text-base-content/60">Subtotal</span>
<span class="font-medium">{formatCurrency(invoice.subtotal)}</span>
<span class="font-medium">{formatCurrency(invoice.subtotal, invoice.currency)}</span>
</div>
{(invoice.discountAmount && invoice.discountAmount > 0) && (
<div class="flex justify-between text-sm">
@@ -300,7 +301,7 @@ const isDraft = invoice.status === 'draft';
Discount
{invoice.discountType === 'percentage' && ` (${invoice.discountValue}%)`}
</span>
<span class="font-medium text-success">-{formatCurrency(invoice.discountAmount)}</span>
<span class="font-medium text-success">-{formatCurrency(invoice.discountAmount, invoice.currency)}</span>
</div>
)}
{((invoice.taxRate ?? 0) > 0 || isDraft) && (
@@ -313,13 +314,13 @@ const isDraft = invoice.status === 'draft';
</button>
)}
</span>
<span class="font-medium">{formatCurrency(invoice.taxAmount)}</span>
<span class="font-medium">{formatCurrency(invoice.taxAmount, invoice.currency)}</span>
</div>
)}
<div class="divider my-2"></div>
<div class="flex justify-between text-lg font-bold">
<span>Total</span>
<span class="text-primary">{formatCurrency(invoice.total)}</span>
<span class="text-primary">{formatCurrency(invoice.total, invoice.currency)}</span>
</div>
</div>
</div>
@@ -345,27 +346,59 @@ const isDraft = invoice.status === 'draft';
<!-- Tax Modal -->
<dialog id="tax_modal" class="modal">
<div class="modal-box">
<h3 class="font-bold text-lg">Update Tax Rate</h3>
<p class="py-4">Enter the tax percentage to apply to the subtotal.</p>
<h3 class="font-semibold text-base">Update Tax Rate</h3>
<p class="py-3 text-sm text-base-content/60">Enter the tax percentage to apply to the subtotal.</p>
<form method="POST" action={`/api/invoices/${invoice.id}/update-tax`}>
<div class="form-control mb-6">
<label class="label">
<span class="label-text">Tax Rate (%)</span>
</label>
<fieldset class="fieldset mb-4">
<legend class="fieldset-legend text-xs">Tax Rate (%)</legend>
<input
type="number"
id="tax-rate"
name="taxRate"
step="0.01"
min="0"
max="100"
class="input input-bordered w-full"
class="input w-full"
value={invoice.taxRate ?? 0}
required
/>
</div>
</fieldset>
<div class="modal-action">
<button type="button" class="btn" onclick="document.getElementById('tax_modal').close()">Cancel</button>
<button type="submit" class="btn btn-primary">Update</button>
<button type="button" class="btn btn-sm" onclick="document.getElementById('tax_modal').close()">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm">Update</button>
</div>
</form>
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
<!-- Import Time Modal -->
<dialog id="import_time_modal" class="modal">
<div class="modal-box">
<h3 class="font-semibold text-base">Import Time Entries</h3>
<p class="py-3 text-sm text-base-content/60">Import billable time entries for this client.</p>
<form method="POST" action={`/api/invoices/${invoice.id}/import-time`}>
<div class="grid grid-cols-2 gap-3 mb-3">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Start Date</legend>
<input type="date" id="start-date" name="startDate" class="input" required />
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">End Date</legend>
<input type="date" id="end-date" name="endDate" class="input" required />
</fieldset>
</div>
<label class="label cursor-pointer justify-start gap-3 mb-4">
<input type="checkbox" name="groupByDay" class="checkbox checkbox-sm" />
<span class="text-sm">Group entries by day</span>
</label>
<div class="modal-action">
<button type="button" class="btn btn-sm" onclick="document.getElementById('import_time_modal').close()">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm">Import</button>
</div>
</form>
</div>

98
src/pages/dashboard/invoices/[id]/edit.astro
View File

@@ -47,130 +47,120 @@ const discountValueDisplay = invoice.discountType === 'fixed'
<DashboardLayout title={`Edit ${invoice.number} - Chronus`}>
<div class="max-w-3xl mx-auto">
<div class="mb-6">
<a href={`/dashboard/invoices/${invoice.id}`} class="btn btn-ghost btn-sm gap-2 pl-0 hover:bg-transparent text-base-content/60">
<a href={`/dashboard/invoices/${invoice.id}`} class="btn btn-ghost btn-xs gap-2 pl-0 hover:bg-transparent text-base-content/60">
<Icon name="heroicons:arrow-left" class="w-4 h-4" />
Back to Invoice
</a>
<h1 class="text-3xl font-bold mt-2">Edit Details</h1>
<h1 class="text-2xl font-extrabold tracking-tight mt-2">Edit Details</h1>
</div>
<form method="POST" action={`/api/invoices/${invoice.id}/update`} class="card bg-base-100 shadow-xl border border-base-200">
<div class="card-body gap-6">
<form method="POST" action={`/api/invoices/${invoice.id}/update`} class="card card-border bg-base-100">
<div class="card-body p-4 gap-3">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
<!-- Number -->
<div class="form-control">
<label class="label">
<span class="label-text font-semibold">Number</span>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Number</legend>
<input
type="text"
id="invoice-number"
name="number"
class="input input-bordered font-mono"
class="input font-mono"
value={invoice.number}
required
/>
</div>
</fieldset>
<!-- Currency -->
<div class="form-control">
<label class="label">
<span class="label-text font-semibold">Currency</span>
</label>
<select name="currency" class="select select-bordered w-full">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Currency</legend>
<select id="invoice-currency" name="currency" class="select w-full">
<option value="USD" selected={invoice.currency === 'USD'}>USD ($)</option>
<option value="EUR" selected={invoice.currency === 'EUR'}>EUR (€)</option>
<option value="GBP" selected={invoice.currency === 'GBP'}>GBP (£)</option>
<option value="CAD" selected={invoice.currency === 'CAD'}>CAD ($)</option>
<option value="AUD" selected={invoice.currency === 'AUD'}>AUD ($)</option>
</select>
</div>
</fieldset>
<!-- Issue Date -->
<div class="form-control">
<label class="label">
<span class="label-text font-semibold">Issue Date</span>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Issue Date</legend>
<input
type="date"
id="invoice-issue-date"
name="issueDate"
class="input input-bordered"
class="input"
value={issueDateStr}
required
/>
</div>
</fieldset>
<!-- Due Date -->
<div class="form-control">
<label class="label">
<span class="label-text font-semibold">
{invoice.type === 'quote' ? 'Valid Until' : 'Due Date'}
</span>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">{invoice.type === 'quote' ? 'Valid Until' : 'Due Date'}</legend>
<input
type="date"
id="invoice-due-date"
name="dueDate"
class="input input-bordered"
class="input"
value={dueDateStr}
required
/>
</div>
</fieldset>
<!-- Discount -->
<div class="form-control">
<label class="label">
<span class="label-text font-semibold">Discount</span>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Discount</legend>
<div class="join w-full">
<select name="discountType" class="select select-bordered join-item">
<select id="invoice-discount-type" name="discountType" class="select join-item">
<option value="percentage" selected={!invoice.discountType || invoice.discountType === 'percentage'}>%</option>
<option value="fixed" selected={invoice.discountType === 'fixed'}>Fixed</option>
</select>
<input
type="number"
id="invoice-discount-value"
name="discountValue"
step="0.01"
min="0"
class="input input-bordered join-item w-full"
class="input join-item w-full"
value={discountValueDisplay}
/>
</div>
</div>
</fieldset>
<!-- Tax Rate -->
<div class="form-control">
<label class="label">
<span class="label-text font-semibold">Tax Rate (%)</span>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Tax Rate (%)</legend>
<input
type="number"
id="invoice-tax-rate"
name="taxRate"
step="0.01"
min="0"
max="100"
class="input input-bordered"
class="input"
value={invoice.taxRate}
/>
</div>
</fieldset>
</div>
<!-- Notes -->
<div class="form-control flex flex-col">
<label class="label">
<span class="label-text font-semibold">Notes / Terms</span>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Notes / Terms</legend>
<textarea
id="invoice-notes"
name="notes"
class="textarea textarea-bordered h-32 font-mono text-sm"
class="textarea h-32 font-mono text-sm"
placeholder="Payment terms, bank details, or thank you notes..."
>{invoice.notes}</textarea>
</div>
</fieldset>
<div class="divider"></div>
<div class="divider my-0"></div>
<div class="card-actions justify-end">
<a href={`/dashboard/invoices/${invoice.id}`} class="btn btn-ghost">Cancel</a>
<button type="submit" class="btn btn-primary">
<div class="flex justify-end gap-2">
<a href={`/dashboard/invoices/${invoice.id}`} class="btn btn-ghost btn-sm">Cancel</a>
<button type="submit" class="btn btn-primary btn-sm">
Save Changes
</button>
</div>

241
src/pages/dashboard/invoices/index.astro
View File

@@ -1,47 +1,92 @@
---
import DashboardLayout from '../../../layouts/DashboardLayout.astro';
import { Icon } from 'astro-icon/components';
import StatCard from '../../../components/StatCard.astro';
import { db } from '../../../db';
import { invoices, clients, members } from '../../../db/schema';
import { eq, desc, and } from 'drizzle-orm';
import { invoices, clients } from '../../../db/schema';
import { eq, desc, and, gte, lte, sql } from 'drizzle-orm';
import { getCurrentTeam } from '../../../lib/getCurrentTeam';
import { formatCurrency } from '../../../lib/formatTime';
const user = Astro.locals.user;
if (!user) return Astro.redirect('/login');
// Get current team from cookie
const currentTeamId = Astro.cookies.get('currentTeamId')?.value;
const userMemberships = await db.select()
.from(members)
.where(eq(members.userId, user.id))
.all();
if (userMemberships.length === 0) return Astro.redirect('/dashboard');
// Use current team or fallback to first membership
const userMembership = currentTeamId
? userMemberships.find(m => m.organizationId === currentTeamId) || userMemberships[0]
: userMemberships[0];
const userMembership = await getCurrentTeam(user, Astro.cookies.get('currentTeamId')?.value);
if (!userMembership) return Astro.redirect('/dashboard');
const currentTeamIdResolved = userMembership.organizationId;
// Fetch invoices and quotes
const allInvoices = await db.select({
// Get filter parameters
const currentYear = new Date().getFullYear();
const yearParam = Astro.url.searchParams.get('year');
const selectedYear: string | number = yearParam === 'current' || !yearParam ? 'current' : parseInt(yearParam);
const yearNum = typeof selectedYear === 'number' ? selectedYear : currentYear;
const selectedType = Astro.url.searchParams.get('type') || 'all';
const selectedStatus = Astro.url.searchParams.get('status') || 'all';
const sortBy = Astro.url.searchParams.get('sort') || 'date-desc';
// Fetch all invoices for the organization (for year dropdown)
const allInvoicesRaw = await db.select({
invoice: invoices,
client: clients,
})
.from(invoices)
.leftJoin(clients, eq(invoices.clientId, clients.id))
.where(eq(invoices.organizationId, currentTeamIdResolved))
.orderBy(desc(invoices.issueDate))
.all();
const formatCurrency = (amount: number, currency: string) => {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: currency,
}).format(amount / 100);
};
// Get unique years from invoices
const availableYears = [...new Set(allInvoicesRaw.map(i => i.invoice.issueDate.getFullYear()))].sort((a, b) => b - a);
// Ensure current year is in the list
if (!availableYears.includes(currentYear)) {
availableYears.unshift(currentYear);
}
// Filter by year
const yearStart = new Date(yearNum, 0, 1);
const yearEnd = selectedYear === 'current' ? new Date() : new Date(yearNum, 11, 31, 23, 59, 59);
let filteredInvoices = allInvoicesRaw.filter(i => {
const issueDate = i.invoice.issueDate;
return issueDate >= yearStart && issueDate <= yearEnd;
});
// Filter by type
if (selectedType !== 'all') {
filteredInvoices = filteredInvoices.filter(i => i.invoice.type === selectedType);
}
// Filter by status
if (selectedStatus !== 'all') {
filteredInvoices = filteredInvoices.filter(i => i.invoice.status === selectedStatus);
}
// Sort invoices
const allInvoices = filteredInvoices.sort((a, b) => {
switch (sortBy) {
case 'date-desc':
return b.invoice.issueDate.getTime() - a.invoice.issueDate.getTime();
case 'date-asc':
return a.invoice.issueDate.getTime() - b.invoice.issueDate.getTime();
case 'amount-desc':
return b.invoice.total - a.invoice.total;
case 'amount-asc':
return a.invoice.total - b.invoice.total;
case 'number-desc':
return b.invoice.number.localeCompare(a.invoice.number);
case 'number-asc':
return a.invoice.number.localeCompare(b.invoice.number);
default:
return b.invoice.issueDate.getTime() - a.invoice.issueDate.getTime();
}
});
// Calculate stats for the selected year
const yearInvoices = allInvoicesRaw.filter(i => {
const issueDate = i.invoice.issueDate;
return issueDate >= yearStart && issueDate <= yearEnd;
});
const getStatusColor = (status: string) => {
switch (status) {
@@ -59,60 +104,114 @@ const getStatusColor = (status: string) => {
<DashboardLayout title="Invoices & Quotes - Chronus">
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
<div>
<h1 class="text-3xl font-bold">Invoices & Quotes</h1>
<p class="text-base-content/60 mt-1">Manage your billing and estimates</p>
<h1 class="text-2xl font-extrabold tracking-tight">Invoices & Quotes</h1>
<p class="text-base-content/60 text-sm mt-1">Manage your billing and estimates</p>
</div>
<a href="/dashboard/invoices/new" class="btn btn-primary">
<Icon name="heroicons:plus" class="w-5 h-5" />
<a href="/dashboard/invoices/new" class="btn btn-primary btn-sm">
<Icon name="heroicons:plus" class="w-4 h-4" />
Create New
</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="stats shadow bg-base-100 border border-base-200">
<div class="stat">
<div class="stat-figure text-primary">
<Icon name="heroicons:document-text" class="w-8 h-8" />
</div>
<div class="stat-title">Total Invoices</div>
<div class="stat-value text-primary">{allInvoices.filter(i => i.invoice.type === 'invoice').length}</div>
<div class="stat-desc">All time</div>
</div>
</div>
<div class="stats shadow bg-base-100 border border-base-200">
<div class="stat">
<div class="stat-figure text-secondary">
<Icon name="heroicons:clipboard-document-list" class="w-8 h-8" />
</div>
<div class="stat-title">Open Quotes</div>
<div class="stat-value text-secondary">{allInvoices.filter(i => i.invoice.type === 'quote' && i.invoice.status === 'sent').length}</div>
<div class="stat-desc">Waiting for approval</div>
</div>
</div>
<div class="stats shadow bg-base-100 border border-base-200">
<div class="stat">
<div class="stat-figure text-success">
<Icon name="heroicons:currency-dollar" class="w-8 h-8" />
</div>
<div class="stat-title">Total Revenue</div>
<div class="stat-value text-success">
{formatCurrency(allInvoices
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-6">
<StatCard
title="Total Invoices"
value={String(yearInvoices.filter(i => i.invoice.type === 'invoice').length)}
description={selectedYear === 'current' ? `${currentYear} (YTD)` : String(selectedYear)}
icon="heroicons:document-text"
color="text-primary"
/>
<StatCard
title="Open Quotes"
value={String(yearInvoices.filter(i => i.invoice.type === 'quote' && i.invoice.status === 'sent').length)}
description="Waiting for approval"
icon="heroicons:clipboard-document-list"
color="text-secondary"
/>
<StatCard
title="Total Revenue"
value={formatCurrency(yearInvoices
.filter(i => i.invoice.type === 'invoice' && i.invoice.status === 'paid')
.reduce((acc, curr) => acc + curr.invoice.total, 0), 'USD')}
description={`Paid invoices (${selectedYear === 'current' ? `${currentYear} YTD` : selectedYear})`}
icon="heroicons:currency-dollar"
color="text-success"
/>
</div>
<div class="stat-desc">Paid invoices</div>
<!-- Filters -->
<div class="card card-border bg-base-100 mb-6">
<div class="card-body p-4">
<form method="GET" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Year</legend>
<select name="year" class="select w-full" onchange="this.form.submit()">
<option value="current" selected={selectedYear === 'current'}>Current Year to Date ({currentYear})</option>
{availableYears.map(year => (
<option value={year} selected={year === selectedYear}>{year}</option>
))}
</select>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Type</legend>
<select name="type" class="select w-full" onchange="this.form.submit()">
<option value="all" selected={selectedType === 'all'}>All Types</option>
<option value="invoice" selected={selectedType === 'invoice'}>Invoices</option>
<option value="quote" selected={selectedType === 'quote'}>Quotes</option>
</select>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Status</legend>
<select name="status" class="select w-full" onchange="this.form.submit()">
<option value="all" selected={selectedStatus === 'all'}>All Statuses</option>
<option value="draft" selected={selectedStatus === 'draft'}>Draft</option>
<option value="sent" selected={selectedStatus === 'sent'}>Sent</option>
<option value="paid" selected={selectedStatus === 'paid'}>Paid</option>
<option value="accepted" selected={selectedStatus === 'accepted'}>Accepted</option>
<option value="declined" selected={selectedStatus === 'declined'}>Declined</option>
<option value="void" selected={selectedStatus === 'void'}>Void</option>
</select>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Sort By</legend>
<select name="sort" class="select w-full" onchange="this.form.submit()">
<option value="date-desc" selected={sortBy === 'date-desc'}>Date (Newest First)</option>
<option value="date-asc" selected={sortBy === 'date-asc'}>Date (Oldest First)</option>
<option value="amount-desc" selected={sortBy === 'amount-desc'}>Amount (High to Low)</option>
<option value="amount-asc" selected={sortBy === 'amount-asc'}>Amount (Low to High)</option>
<option value="number-desc" selected={sortBy === 'number-desc'}>Number (Z-A)</option>
<option value="number-asc" selected={sortBy === 'number-asc'}>Number (A-Z)</option>
</select>
</fieldset>
</form>
{(selectedYear !== 'current' || selectedType !== 'all' || selectedStatus !== 'all' || sortBy !== 'date-desc') && (
<div class="mt-3">
<a href="/dashboard/invoices" class="btn btn-ghost btn-xs">
<Icon name="heroicons:x-mark" class="w-3 h-3" />
Clear Filters
</a>
</div>
)}
</div>
</div>
<div class="card bg-base-100 shadow-xl border border-base-200">
<div class="card card-border bg-base-100">
<div class="card-body p-0">
<div class="px-4 py-3 border-b border-base-200">
<p class="text-xs text-base-content/50">
Showing <span class="font-semibold text-base-content">{allInvoices.length}</span>
{allInvoices.length === 1 ? 'result' : 'results'}
{selectedYear === 'current' ? ` for ${currentYear} (year to date)` : ` for ${selectedYear}`}
</p>
</div>
<div class="overflow-x-auto md:overflow-visible pb-32 md:pb-0">
<table class="table table-zebra">
<table class="table table-sm">
<thead>
<tr class="bg-base-200/50">
<tr>
<th>Number</th>
<th>Client</th>
<th>Date</th>
@@ -126,14 +225,14 @@ const getStatusColor = (status: string) => {
<tbody>
{allInvoices.length === 0 ? (
<tr>
<td colspan="8" class="text-center py-8 text-base-content/60">
<td colspan="8" class="text-center py-8 text-base-content/50 text-sm">
No invoices or quotes found. Create one to get started.
</td>
</tr>
) : (
allInvoices.map(({ invoice, client }) => (
<tr class="hover:bg-base-200/50 transition-colors">
<td class="font-mono font-medium">
<tr class="hover">
<td class="font-mono font-medium text-sm">
<a href={`/dashboard/invoices/${invoice.id}`} class="link link-hover text-primary">
{invoice.number}
</a>
@@ -151,7 +250,7 @@ const getStatusColor = (status: string) => {
{formatCurrency(invoice.total, invoice.currency)}
</td>
<td>
<div class={`badge ${getStatusColor(invoice.status)} badge-sm uppercase font-bold tracking-wider`}>
<div class={`badge ${getStatusColor(invoice.status)} badge-xs uppercase font-bold tracking-wider`}>
{invoice.status}
</div>
</td>
@@ -160,10 +259,10 @@ const getStatusColor = (status: string) => {
</td>
<td class="text-right">
<div class="dropdown dropdown-end">
<div role="button" tabindex="0" class="btn btn-ghost btn-sm btn-square">
<Icon name="heroicons:ellipsis-vertical" class="w-5 h-5" />
<div role="button" tabindex="0" class="btn btn-ghost btn-xs btn-square">
<Icon name="heroicons:ellipsis-vertical" class="w-4 h-4" />
</div>
<ul tabindex="0" class="dropdown-content menu p-2 shadow-lg bg-base-100 rounded-box w-52 border border-base-200 z-100">
<ul tabindex="0" class="dropdown-content menu p-2 bg-base-100 rounded-box w-52 border border-base-200 z-100">
<li>
<a href={`/dashboard/invoices/${invoice.id}`}>
<Icon name="heroicons:eye" class="w-4 h-4" />

132
src/pages/dashboard/invoices/new.astro
View File

@@ -2,29 +2,23 @@
import DashboardLayout from '../../../layouts/DashboardLayout.astro';
import { Icon } from 'astro-icon/components';
import { db } from '../../../db';
import { clients, members, invoices } from '../../../db/schema';
import { clients, invoices, organizations } from '../../../db/schema';
import { eq, desc, and } from 'drizzle-orm';
import { getCurrentTeam } from '../../../lib/getCurrentTeam';
const user = Astro.locals.user;
if (!user) return Astro.redirect('/login');
// Get current team from cookie
const currentTeamId = Astro.cookies.get('currentTeamId')?.value;
const userMemberships = await db.select()
.from(members)
.where(eq(members.userId, user.id))
.all();
if (userMemberships.length === 0) return Astro.redirect('/dashboard');
// Use current team or fallback to first membership
const userMembership = currentTeamId
? userMemberships.find(m => m.organizationId === currentTeamId) || userMemberships[0]
: userMemberships[0];
const userMembership = await getCurrentTeam(user, Astro.cookies.get('currentTeamId')?.value);
if (!userMembership) return Astro.redirect('/dashboard');
const currentTeamIdResolved = userMembership.organizationId;
const currentOrganization = await db.select()
.from(organizations)
.where(eq(organizations.id, currentTeamIdResolved))
.get();
// Fetch clients for dropdown
const teamClients = await db.select()
.from(clients)
@@ -86,122 +80,112 @@ const defaultDueDate = nextMonth.toISOString().split('T')[0];
<DashboardLayout title="New Document - Chronus">
<div class="max-w-3xl mx-auto">
<div class="mb-6">
<a href="/dashboard/invoices" class="btn btn-ghost btn-sm gap-2 pl-0 hover:bg-transparent text-base-content/60">
<a href="/dashboard/invoices" class="btn btn-ghost btn-xs gap-2 pl-0 hover:bg-transparent text-base-content/60">
<Icon name="heroicons:arrow-left" class="w-4 h-4" />
Back to Invoices
</a>
<h1 class="text-3xl font-bold mt-2">Create New Document</h1>
<h1 class="text-2xl font-extrabold tracking-tight mt-2">Create New Document</h1>
</div>
{teamClients.length === 0 ? (
<div role="alert" class="alert alert-warning shadow-lg">
<Icon name="heroicons:exclamation-triangle" class="w-6 h-6" />
<div role="alert" class="alert alert-warning">
<Icon name="heroicons:exclamation-triangle" class="w-5 h-5" />
<div>
<h3 class="font-bold">No Clients Found</h3>
<h3 class="font-semibold text-sm">No Clients Found</h3>
<div class="text-xs">You need to add a client before you can create an invoice or quote.</div>
</div>
<a href="/dashboard/clients" class="btn btn-sm">Manage Clients</a>
</div>
) : (
<form method="POST" action="/api/invoices/create" class="card bg-base-100 shadow-xl border border-base-200">
<div class="card-body gap-6">
<form method="POST" action="/api/invoices/create" class="card card-border bg-base-100">
<div class="card-body p-4 gap-4">
<!-- Document Type -->
<div class="form-control">
<label class="label">
<span class="label-text font-semibold">Document Type</span>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Document Type</legend>
<div class="flex gap-3">
<label class="label cursor-pointer justify-start gap-2 border border-base-200 rounded-lg p-3 flex-1 hover:border-primary has-checked:border-primary has-checked:bg-primary/5 transition-all font-medium text-sm" for="document-type-invoice">
<input type="radio" id="document-type-invoice" name="type" value="invoice" class="radio radio-primary radio-sm" checked />
Invoice
</label>
<div class="flex gap-4">
<label class="label cursor-pointer justify-start gap-2 border border-base-300 rounded-lg p-3 flex-1 hover:border-primary has-checked:border-primary has-checked:bg-primary/5 transition-all">
<input type="radio" name="type" value="invoice" class="radio radio-primary" checked />
<span class="label-text font-medium">Invoice</span>
</label>
<label class="label cursor-pointer justify-start gap-2 border border-base-300 rounded-lg p-3 flex-1 hover:border-primary has-checked:border-primary has-checked:bg-primary/5 transition-all">
<input type="radio" name="type" value="quote" class="radio radio-primary" />
<span class="label-text font-medium">Quote / Estimate</span>
<label class="label cursor-pointer justify-start gap-2 border border-base-200 rounded-lg p-3 flex-1 hover:border-primary has-checked:border-primary has-checked:bg-primary/5 transition-all font-medium text-sm" for="document-type-quote">
<input type="radio" id="document-type-quote" name="type" value="quote" class="radio radio-primary radio-sm" />
Quote / Estimate
</label>
</div>
</div>
</fieldset>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
<!-- Client -->
<div class="form-control">
<label class="label">
<span class="label-text font-semibold">Client</span>
</label>
<select name="clientId" class="select select-bordered w-full" required>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Client</legend>
<select id="invoice-client" name="clientId" class="select w-full" required>
<option value="" disabled selected>Select a client...</option>
{teamClients.map(client => (
<option value={client.id}>{client.name}</option>
))}
</select>
</div>
</fieldset>
<!-- Number -->
<div class="form-control">
<label class="label">
<span class="label-text font-semibold">Number</span>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Number</legend>
<input
type="text"
name="number"
id="documentNumber"
class="input input-bordered font-mono"
class="input font-mono"
value={nextInvoiceNumber}
data-invoice-number={nextInvoiceNumber}
data-quote-number={nextQuoteNumber}
required
/>
</div>
</fieldset>
<!-- Issue Date -->
<div class="form-control">
<label class="label">
<span class="label-text font-semibold">Issue Date</span>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Issue Date</legend>
<input
type="date"
id="invoice-issue-date"
name="issueDate"
class="input input-bordered"
class="input"
value={today}
required
/>
</div>
</fieldset>
<!-- Due Date -->
<div class="form-control">
<label class="label">
<span class="label-text font-semibold" id="dueDateLabel">Due Date</span>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs" id="dueDateLabel">Due Date</legend>
<input
type="date"
id="invoice-due-date"
name="dueDate"
class="input input-bordered"
class="input"
value={defaultDueDate}
required
/>
</div>
</fieldset>
<!-- Currency -->
<div class="form-control">
<label class="label">
<span class="label-text font-semibold">Currency</span>
</label>
<select name="currency" class="select select-bordered w-full">
<option value="USD">USD ($)</option>
<option value="EUR">EUR (€)</option>
<option value="GBP">GBP (£)</option>
<option value="CAD">CAD ($)</option>
<option value="AUD">AUD ($)</option>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Currency</legend>
<select id="invoice-currency" name="currency" class="select w-full">
<option value="USD" selected={currentOrganization?.defaultCurrency === 'USD'}>USD ($)</option>
<option value="EUR" selected={currentOrganization?.defaultCurrency === 'EUR'}>EUR (€)</option>
<option value="GBP" selected={currentOrganization?.defaultCurrency === 'GBP'}>GBP (£)</option>
<option value="CAD" selected={currentOrganization?.defaultCurrency === 'CAD'}>CAD ($)</option>
<option value="AUD" selected={currentOrganization?.defaultCurrency === 'AUD'}>AUD ($)</option>
</select>
</div>
</fieldset>
</div>
<div class="divider"></div>
<div class="divider my-0"></div>
<div class="card-actions justify-end">
<a href="/dashboard/invoices" class="btn btn-ghost">Cancel</a>
<button type="submit" class="btn btn-primary">
<div class="flex justify-end gap-2">
<a href="/dashboard/invoices" class="btn btn-ghost btn-sm">Cancel</a>
<button type="submit" class="btn btn-primary btn-sm">
Create Draft
<Icon name="heroicons:arrow-right" class="w-4 h-4" />
</button>

30
src/pages/dashboard/organizations/new.astro
View File

@@ -12,36 +12,34 @@ if (!user) return Astro.redirect('/login');
<DashboardLayout title="Create Team - Chronus">
<div class="max-w-2xl mx-auto">
<div class="flex items-center gap-3 mb-6">
<a href="/dashboard" class="btn btn-ghost btn-sm">
<Icon name="heroicons:arrow-left" class="w-5 h-5" />
<a href="/dashboard" class="btn btn-ghost btn-xs">
<Icon name="heroicons:arrow-left" class="w-4 h-4" />
</a>
<h1 class="text-3xl font-bold">Create New Team</h1>
<h1 class="text-2xl font-extrabold tracking-tight">Create New Team</h1>
</div>
<form method="POST" action="/api/organizations/create" class="card bg-base-200 shadow-xl border border-base-300">
<div class="card-body">
<form method="POST" action="/api/organizations/create" class="card card-border bg-base-100">
<div class="card-body p-4">
<div class="alert alert-info mb-4">
<Icon name="heroicons:information-circle" class="w-6 h-6" />
<span>Create a new team to manage separate projects and collaborators. You'll be the owner.</span>
<Icon name="heroicons:information-circle" class="w-4 h-4" />
<span class="text-sm">Create a new team to manage separate projects and collaborators. You'll be the owner.</span>
</div>
<div class="form-control">
<label class="label pb-2" for="name">
<span class="label-text font-medium">Team Name</span>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Team Name</legend>
<input
type="text"
id="name"
name="name"
placeholder="Acme Corp"
class="input input-bordered w-full"
class="input w-full"
required
/>
</div>
</fieldset>
<div class="card-actions justify-end mt-6">
<a href="/dashboard" class="btn btn-ghost">Cancel</a>
<button type="submit" class="btn btn-primary">Create Team</button>
<div class="flex justify-end gap-2 mt-4">
<a href="/dashboard" class="btn btn-ghost btn-sm">Cancel</a>
<button type="submit" class="btn btn-primary btn-sm">Create Team</button>
</div>
</div>
</form>

410
src/pages/dashboard/reports.astro
View File

@@ -1,31 +1,21 @@
---
import DashboardLayout from '../../layouts/DashboardLayout.astro';
import { Icon } from 'astro-icon/components';
import CategoryChart from '../../components/CategoryChart.vue';
import StatCard from '../../components/StatCard.astro';
import TagChart from '../../components/TagChart.vue';
import ClientChart from '../../components/ClientChart.vue';
import MemberChart from '../../components/MemberChart.vue';
import { db } from '../../db';
import { timeEntries, members, users, clients, categories, invoices } from '../../db/schema';
import { timeEntries, members, users, clients, tags, invoices } from '../../db/schema';
import { eq, and, gte, lte, sql, desc } from 'drizzle-orm';
import { formatDuration, formatTimeRange } from '../../lib/formatTime';
import { formatDuration, formatTimeRange, formatCurrency } from '../../lib/formatTime';
import { getCurrentTeam } from '../../lib/getCurrentTeam';
const user = Astro.locals.user;
if (!user) return Astro.redirect('/login');
// Get current team from cookie
const currentTeamId = Astro.cookies.get('currentTeamId')?.value;
const userMemberships = await db.select()
.from(members)
.where(eq(members.userId, user.id))
.all();
if (userMemberships.length === 0) return Astro.redirect('/dashboard');
// Use current team or fallback to first membership
const userMembership = currentTeamId
? userMemberships.find(m => m.organizationId === currentTeamId) || userMemberships[0]
: userMemberships[0];
const userMembership = await getCurrentTeam(user, Astro.cookies.get('currentTeamId')?.value);
if (!userMembership) return Astro.redirect('/dashboard');
const teamMembers = await db.select({
id: users.id,
@@ -37,9 +27,9 @@ const teamMembers = await db.select({
.where(eq(members.organizationId, userMembership.organizationId))
.all();
const allCategories = await db.select()
.from(categories)
.where(eq(categories.organizationId, userMembership.organizationId))
const allTags = await db.select()
.from(tags)
.where(eq(tags.organizationId, userMembership.organizationId))
.all();
const allClients = await db.select()
@@ -49,7 +39,7 @@ const allClients = await db.select()
const url = new URL(Astro.request.url);
const selectedMemberId = url.searchParams.get('member') || '';
const selectedCategoryId = url.searchParams.get('category') || '';
const selectedTagId = url.searchParams.get('tag') || '';
const selectedClientId = url.searchParams.get('client') || '';
const timeRange = url.searchParams.get('range') || 'week';
const customFrom = url.searchParams.get('from');
@@ -102,8 +92,8 @@ if (selectedMemberId) {
conditions.push(eq(timeEntries.userId, selectedMemberId));
}
if (selectedCategoryId) {
conditions.push(eq(timeEntries.categoryId, selectedCategoryId));
if (selectedTagId) {
conditions.push(eq(timeEntries.tagId, selectedTagId));
}
if (selectedClientId) {
@@ -114,12 +104,12 @@ const entries = await db.select({
entry: timeEntries,
user: users,
client: clients,
category: categories,
tag: tags,
})
.from(timeEntries)
.innerJoin(users, eq(timeEntries.userId, users.id))
.innerJoin(clients, eq(timeEntries.clientId, clients.id))
.innerJoin(categories, eq(timeEntries.categoryId, categories.id))
.leftJoin(tags, eq(timeEntries.tagId, tags.id))
.where(and(...conditions))
.orderBy(desc(timeEntries.startTime))
.all();
@@ -140,9 +130,9 @@ const statsByMember = teamMembers.map(member => {
};
}).sort((a, b) => b.totalTime - a.totalTime);
const statsByCategory = allCategories.map(category => {
const categoryEntries = entries.filter(e => e.category.id === category.id);
const totalTime = categoryEntries.reduce((sum, e) => {
const statsByTag = allTags.map(tag => {
const tagEntries = entries.filter(e => e.tag?.id === tag.id);
const totalTime = tagEntries.reduce((sum, e) => {
if (e.entry.endTime) {
return sum + (e.entry.endTime.getTime() - e.entry.startTime.getTime());
}
@@ -150,9 +140,9 @@ const statsByCategory = allCategories.map(category => {
}, 0);
return {
category,
tag,
totalTime,
entryCount: categoryEntries.length,
entryCount: tagEntries.length,
};
}).sort((a, b) => b.totalTime - a.totalTime);
@@ -247,13 +237,6 @@ const revenueByClient = allClients.map(client => {
};
}).filter(s => s.revenue > 0).sort((a, b) => b.revenue - a.revenue);
function formatCurrency(amount: number, currency: string = 'USD') {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: currency,
}).format(amount / 100);
}
function getTimeRangeLabel(range: string) {
switch (range) {
case 'today': return 'Today';
@@ -269,17 +252,15 @@ function getTimeRangeLabel(range: string) {
---
<DashboardLayout title="Reports - Chronus">
<h1 class="text-3xl font-bold mb-6">Team Reports</h1>
<h1 class="text-2xl font-extrabold tracking-tight mb-6">Team Reports</h1>
<!-- Filters -->
<div class="card bg-base-200 shadow-xl border border-base-300 mb-6">
<div class="card-body">
<form method="GET" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Time Range</span>
</label>
<select name="range" class="select select-bordered" onchange="this.form.submit()">
<div class="card card-border bg-base-100 mb-6">
<div class="card-body p-4">
<form method="GET" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Time Range</legend>
<select id="reports-range" name="range" class="select w-full" onchange="this.form.submit()">
<option value="today" selected={timeRange === 'today'}>Today</option>
<option value="week" selected={timeRange === 'week'}>Last 7 Days</option>
<option value="month" selected={timeRange === 'month'}>Last 30 Days</option>
@@ -288,42 +269,38 @@ function getTimeRangeLabel(range: string) {
<option value="last-month" selected={timeRange === 'last-month'}>Last Month</option>
<option value="custom" selected={timeRange === 'custom'}>Custom Range</option>
</select>
</div>
</fieldset>
{timeRange === 'custom' && (
<>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">From Date</span>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">From Date</legend>
<input
type="date"
id="reports-from"
name="from"
class="input input-bordered w-full"
class="input w-full"
value={customFrom || (startDate.getFullYear() + '-' + String(startDate.getMonth() + 1).padStart(2, '0') + '-' + String(startDate.getDate()).padStart(2, '0'))}
onchange="this.form.submit()"
/>
</div>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">To Date</span>
</label>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">To Date</legend>
<input
type="date"
id="reports-to"
name="to"
class="input input-bordered w-full"
class="input w-full"
value={customTo || (endDate.getFullYear() + '-' + String(endDate.getMonth() + 1).padStart(2, '0') + '-' + String(endDate.getDate()).padStart(2, '0'))}
onchange="this.form.submit()"
/>
</div>
</fieldset>
</>
)}
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Team Member</span>
</label>
<select name="member" class="select select-bordered" onchange="this.form.submit()">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Team Member</legend>
<select id="reports-member" name="member" class="select w-full" onchange="this.form.submit()">
<option value="">All Members</option>
{teamMembers.map(member => (
<option value={member.id} selected={selectedMemberId === member.id}>
@@ -331,27 +308,23 @@ function getTimeRangeLabel(range: string) {
</option>
))}
</select>
</div>
</fieldset>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Category</span>
</label>
<select name="category" class="select select-bordered" onchange="this.form.submit()">
<option value="">All Categories</option>
{allCategories.map(category => (
<option value={category.id} selected={selectedCategoryId === category.id}>
{category.name}
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Tag</legend>
<select id="reports-tag" name="tag" class="select w-full" onchange="this.form.submit()">
<option value="">All Tags</option>
{allTags.map(tag => (
<option value={tag.id} selected={selectedTagId === tag.id}>
{tag.name}
</option>
))}
</select>
</div>
</fieldset>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Client</span>
</label>
<select name="client" class="select select-bordered" onchange="this.form.submit()">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Client</legend>
<select id="reports-client" name="client" class="select w-full" onchange="this.form.submit()">
<option value="">All Clients</option>
{allClients.map(client => (
<option value={client.id} selected={selectedClientId === client.id}>
@@ -359,78 +332,49 @@ function getTimeRangeLabel(range: string) {
</option>
))}
</select>
</div>
</fieldset>
</form>
<style>
@media (max-width: 767px) {
form {
align-items: stretch !important;
}
.form-control {
width: 100%;
}
}
select, input {
width: 100%;
}
</style>
</div>
</div>
<!-- Summary Stats -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
<div class="stats shadow border border-base-300">
<div class="stat">
<div class="stat-figure text-primary">
<Icon name="heroicons:clock" class="w-8 h-8" />
</div>
<div class="stat-title">Total Time</div>
<div class="stat-value text-primary">{formatDuration(totalTime)}</div>
<div class="stat-desc">{getTimeRangeLabel(timeRange)}</div>
</div>
</div>
<div class="stats shadow border border-base-300">
<div class="stat">
<div class="stat-figure text-secondary">
<Icon name="heroicons:list-bullet" class="w-8 h-8" />
</div>
<div class="stat-title">Total Entries</div>
<div class="stat-value text-secondary">{entries.length}</div>
<div class="stat-desc">{getTimeRangeLabel(timeRange)}</div>
</div>
</div>
<div class="stats shadow border border-base-300">
<div class="stat">
<div class="stat-figure text-success">
<Icon name="heroicons:currency-dollar" class="w-8 h-8" />
</div>
<div class="stat-title">Revenue</div>
<div class="stat-value text-success">{formatCurrency(revenueStats.total)}</div>
<div class="stat-desc">{invoiceStats.paid} paid invoices</div>
</div>
</div>
<div class="stats shadow border border-base-300">
<div class="stat">
<div class="stat-figure text-accent">
<Icon name="heroicons:user-group" class="w-8 h-8" />
</div>
<div class="stat-title">Active Members</div>
<div class="stat-value text-accent">{statsByMember.filter(s => s.entryCount > 0).length}</div>
<div class="stat-desc">of {teamMembers.length} total</div>
</div>
</div>
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-6">
<StatCard
title="Total Time"
value={formatDuration(totalTime)}
description={getTimeRangeLabel(timeRange)}
icon="heroicons:clock"
color="text-primary"
/>
<StatCard
title="Total Entries"
value={String(entries.length)}
description={getTimeRangeLabel(timeRange)}
icon="heroicons:list-bullet"
color="text-secondary"
/>
<StatCard
title="Revenue"
value={formatCurrency(revenueStats.total)}
description={`${invoiceStats.paid} paid invoices`}
icon="heroicons:currency-dollar"
color="text-success"
/>
<StatCard
title="Active Members"
value={String(statsByMember.filter(s => s.entryCount > 0).length)}
description={`of ${teamMembers.length} total`}
icon="heroicons:user-group"
color="text-accent"
/>
</div>
<!-- Invoice & Quote Stats -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div class="card bg-base-100 shadow-xl border border-base-200">
<div class="card-body">
<h2 class="card-title mb-4">
<Icon name="heroicons:document-text" class="w-6 h-6" />
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<div class="card card-border bg-base-100">
<div class="card-body p-4">
<h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
<Icon name="heroicons:document-text" class="w-4 h-4" />
Invoices Overview
</h2>
<div class="grid grid-cols-2 gap-4">
@@ -463,10 +407,10 @@ function getTimeRangeLabel(range: string) {
</div>
</div>
<div class="card bg-base-100 shadow-xl border border-base-200">
<div class="card-body">
<h2 class="card-title mb-4">
<Icon name="heroicons:clipboard-document-list" class="w-6 h-6" />
<div class="card card-border bg-base-100">
<div class="card-body p-4">
<h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
<Icon name="heroicons:clipboard-document-list" class="w-4 h-4" />
Quotes Overview
</h2>
<div class="grid grid-cols-2 gap-4">
@@ -504,14 +448,14 @@ function getTimeRangeLabel(range: string) {
<!-- Revenue by Client - Only show if there's revenue data and no client filter -->
{!selectedClientId && revenueByClient.length > 0 && (
<div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
<div class="card-body">
<h2 class="card-title mb-4">
<Icon name="heroicons:banknotes" class="w-6 h-6" />
<div class="card card-border bg-base-100 mb-6">
<div class="card-body p-4">
<h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
<Icon name="heroicons:banknotes" class="w-4 h-4" />
Revenue by Client
</h2>
<div class="overflow-x-auto">
<table class="table">
<table class="table table-sm">
<thead>
<tr>
<th>Client</th>
@@ -524,11 +468,11 @@ function getTimeRangeLabel(range: string) {
{revenueByClient.slice(0, 10).map(stat => (
<tr>
<td>
<div class="font-bold">{stat.client.name}</div>
<div class="font-medium">{stat.client.name}</div>
</td>
<td class="font-mono font-bold text-success">{formatCurrency(stat.revenue)}</td>
<td class="font-mono font-semibold text-success text-sm">{formatCurrency(stat.revenue)}</td>
<td>{stat.invoiceCount}</td>
<td class="font-mono">
<td class="font-mono text-sm">
{stat.invoiceCount > 0 ? formatCurrency(stat.revenue / stat.invoiceCount) : formatCurrency(0)}
</td>
</tr>
@@ -543,22 +487,22 @@ function getTimeRangeLabel(range: string) {
{/* Charts Section - Only show if there's data */}
{totalTime > 0 && (
<>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
{/* Category Distribution Chart - Only show when no category filter */}
{!selectedCategoryId && statsByCategory.filter(s => s.totalTime > 0).length > 0 && (
<div class="card bg-base-100 shadow-xl border border-base-200">
<div class="card-body">
<h2 class="card-title mb-4">
<Icon name="heroicons:chart-pie" class="w-6 h-6" />
Category Distribution
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
{/* Tag Distribution Chart - Only show when no tag filter */}
{!selectedTagId && statsByTag.filter(s => s.totalTime > 0).length > 0 && (
<div class="card card-border bg-base-100">
<div class="card-body p-4">
<h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
<Icon name="heroicons:chart-pie" class="w-4 h-4" />
Tag Distribution
</h2>
<div class="h-64 w-full">
<CategoryChart
<TagChart
client:visible
categories={statsByCategory.filter(s => s.totalTime > 0).map(s => ({
name: s.category.name,
tags={statsByTag.filter(s => s.totalTime > 0).map(s => ({
name: s.tag.name,
totalTime: s.totalTime,
color: s.category.color || '#3b82f6'
color: s.tag.color || '#3b82f6'
}))}
/>
</div>
@@ -568,10 +512,10 @@ function getTimeRangeLabel(range: string) {
{/* Client Distribution Chart - Only show when no client filter */}
{!selectedClientId && statsByClient.filter(s => s.totalTime > 0).length > 0 && (
<div class="card bg-base-100 shadow-xl border border-base-200">
<div class="card-body">
<h2 class="card-title mb-4">
<Icon name="heroicons:chart-bar" class="w-6 h-6" />
<div class="card card-border bg-base-100">
<div class="card-body p-4">
<h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
<Icon name="heroicons:chart-bar" class="w-4 h-4" />
Time by Client
</h2>
<div class="h-64 w-full">
@@ -590,10 +534,10 @@ function getTimeRangeLabel(range: string) {
{/* Team Member Chart - Only show when no member filter */}
{!selectedMemberId && statsByMember.filter(s => s.totalTime > 0).length > 0 && (
<div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
<div class="card-body">
<h2 class="card-title mb-4">
<Icon name="heroicons:users" class="w-6 h-6" />
<div class="card card-border bg-base-100 mb-6">
<div class="card-body p-4">
<h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
<Icon name="heroicons:users" class="w-4 h-4" />
Time by Team Member
</h2>
<div class="h-64 w-full">
@@ -613,14 +557,14 @@ function getTimeRangeLabel(range: string) {
{/* Stats by Member - Only show if there's data and no member filter */}
{!selectedMemberId && statsByMember.filter(s => s.totalTime > 0).length > 0 && (
<div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
<div class="card-body">
<h2 class="card-title mb-4">
<Icon name="heroicons:users" class="w-6 h-6" />
<div class="card card-border bg-base-100 mb-6">
<div class="card-body p-4">
<h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
<Icon name="heroicons:users" class="w-4 h-4" />
By Team Member
</h2>
<div class="overflow-x-auto">
<table class="table">
<table class="table table-sm">
<thead>
<tr>
<th>Member</th>
@@ -634,13 +578,13 @@ function getTimeRangeLabel(range: string) {
<tr>
<td>
<div>
<div class="font-bold">{stat.member.name}</div>
<div class="text-sm opacity-50">{stat.member.email}</div>
<div class="font-medium">{stat.member.name}</div>
<div class="text-xs text-base-content/40">{stat.member.email}</div>
</div>
</td>
<td class="font-mono">{formatDuration(stat.totalTime)}</td>
<td class="font-mono text-sm">{formatDuration(stat.totalTime)}</td>
<td>{stat.entryCount}</td>
<td class="font-mono">
<td class="font-mono text-sm">
{stat.entryCount > 0 ? formatDuration(stat.totalTime / stat.entryCount) : '00:00:00 (0m)'}
</td>
</tr>
@@ -652,45 +596,45 @@ function getTimeRangeLabel(range: string) {
</div>
)}
{/* Stats by Category - Only show if there's data and no category filter */}
{!selectedCategoryId && statsByCategory.filter(s => s.totalTime > 0).length > 0 && (
<div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
<div class="card-body">
<h2 class="card-title mb-4">
<Icon name="heroicons:tag" class="w-6 h-6" />
By Category
{/* Stats by Tag - Only show if there's data and no tag filter */}
{!selectedTagId && statsByTag.filter(s => s.totalTime > 0).length > 0 && (
<div class="card card-border bg-base-100 mb-6">
<div class="card-body p-4">
<h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
<Icon name="heroicons:tag" class="w-4 h-4" />
By Tag
</h2>
<div class="overflow-x-auto">
<table class="table">
<table class="table table-sm">
<thead>
<tr>
<th>Category</th>
<th>Tag</th>
<th>Total Time</th>
<th>Entries</th>
<th>% of Total</th>
</tr>
</thead>
<tbody>
{statsByCategory.filter(s => s.totalTime > 0).map(stat => (
{statsByTag.filter(s => s.totalTime > 0).map(stat => (
<tr>
<td>
<div class="flex items-center gap-2">
{stat.category.color && (
<span class="w-4 h-4 rounded-full" style={`background-color: ${stat.category.color}`}></span>
{stat.tag.color && (
<span class="w-3 h-3 rounded-full" style={`background-color: ${stat.tag.color}`}></span>
)}
<span>{stat.category.name}</span>
<span>{stat.tag.name}</span>
</div>
</td>
<td class="font-mono">{formatDuration(stat.totalTime)}</td>
<td class="font-mono text-sm">{formatDuration(stat.totalTime)}</td>
<td>{stat.entryCount}</td>
<td>
<div class="flex items-center gap-2">
<progress
class="progress progress-primary w-20"
class="progress progress-primary w-16"
value={stat.totalTime}
max={totalTime}
></progress>
<span class="text-sm">
<span class="text-xs">
{totalTime > 0 ? Math.round((stat.totalTime / totalTime) * 100) : 0}%
</span>
</div>
@@ -706,14 +650,14 @@ function getTimeRangeLabel(range: string) {
{/* Stats by Client - Only show if there's data and no client filter */}
{!selectedClientId && statsByClient.filter(s => s.totalTime > 0).length > 0 && (
<div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
<div class="card-body">
<h2 class="card-title mb-4">
<Icon name="heroicons:building-office" class="w-6 h-6" />
<div class="card card-border bg-base-100 mb-6">
<div class="card-body p-4">
<h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
<Icon name="heroicons:building-office" class="w-4 h-4" />
By Client
</h2>
<div class="overflow-x-auto">
<table class="table">
<table class="table table-sm">
<thead>
<tr>
<th>Client</th>
@@ -726,16 +670,16 @@ function getTimeRangeLabel(range: string) {
{statsByClient.filter(s => s.totalTime > 0).map(stat => (
<tr>
<td>{stat.client.name}</td>
<td class="font-mono">{formatDuration(stat.totalTime)}</td>
<td class="font-mono text-sm">{formatDuration(stat.totalTime)}</td>
<td>{stat.entryCount}</td>
<td>
<div class="flex items-center gap-2">
<progress
class="progress progress-secondary w-20"
class="progress progress-secondary w-16"
value={stat.totalTime}
max={totalTime}
></progress>
<span class="text-sm">
<span class="text-xs">
{totalTime > 0 ? Math.round((stat.totalTime / totalTime) * 100) : 0}%
</span>
</div>
@@ -750,29 +694,29 @@ function getTimeRangeLabel(range: string) {
)}
{/* Detailed Entries */}
<div class="card bg-base-100 shadow-xl border border-base-200">
<div class="card-body">
<div class="flex justify-between items-center mb-4">
<h2 class="card-title">
<Icon name="heroicons:document-text" class="w-6 h-6" />
<div class="card card-border bg-base-100">
<div class="card-body p-4">
<div class="flex justify-between items-center mb-3">
<h2 class="text-sm font-semibold flex items-center gap-2">
<Icon name="heroicons:document-text" class="w-4 h-4" />
Detailed Entries ({entries.length})
</h2>
{entries.length > 0 && (
<a href={`/api/reports/export${url.search}`} class="btn btn-sm btn-outline" target="_blank">
<Icon name="heroicons:arrow-down-tray" class="w-4 h-4" />
<a href={`/api/reports/export${url.search}`} class="btn btn-xs btn-ghost" target="_blank">
<Icon name="heroicons:arrow-down-tray" class="w-3.5 h-3.5" />
Export CSV
</a>
)}
</div>
{entries.length > 0 ? (
<div class="overflow-x-auto">
<table class="table table-zebra">
<table class="table table-sm">
<thead>
<tr>
<th>Date</th>
<th>Member</th>
<th>Client</th>
<th>Category</th>
<th>Tag</th>
<th>Description</th>
<th>Duration</th>
</tr>
@@ -782,22 +726,26 @@ function getTimeRangeLabel(range: string) {
<tr>
<td class="whitespace-nowrap">
{e.entry.startTime.toLocaleDateString()}<br/>
<span class="text-xs opacity-50">
<span class="text-xs text-base-content/40">
{e.entry.startTime.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
</span>
</td>
<td>{e.user.name}</td>
<td>{e.client.name}</td>
<td>
<div class="flex items-center gap-2">
{e.category.color && (
<span class="w-3 h-3 rounded-full" style={`background-color: ${e.category.color}`}></span>
{e.tag ? (
<div class="badge badge-xs badge-outline flex items-center gap-1">
{e.tag.color && (
<span class="w-2 h-2 rounded-full" style={`background-color: ${e.tag.color}`}></span>
)}
<span>{e.category.name}</span>
<span>{e.tag.name}</span>
</div>
) : (
<span class="text-base-content/30">-</span>
)}
</td>
<td>{e.entry.description || '-'}</td>
<td class="font-mono">
<td class="text-base-content/60">{e.entry.description || '-'}</td>
<td class="font-mono text-sm">
{e.entry.endTime
? formatDuration(e.entry.endTime.getTime() - e.entry.startTime.getTime())
: 'Running...'
@@ -809,12 +757,12 @@ function getTimeRangeLabel(range: string) {
</table>
</div>
) : (
<div class="flex flex-col items-center justify-center py-12 text-center">
<Icon name="heroicons:inbox" class="w-16 h-16 text-base-content/20 mb-4" />
<h3 class="text-lg font-semibold mb-2">No time entries found</h3>
<p class="text-base-content/60 mb-4">Try adjusting your filters or select a different time range.</p>
<a href="/dashboard/tracker" class="btn btn-primary">
<Icon name="heroicons:play" class="w-5 h-5" />
<div class="flex flex-col items-center justify-center py-10 text-center">
<Icon name="heroicons:inbox" class="w-12 h-12 text-base-content/15 mb-3" />
<h3 class="text-base font-semibold mb-1">No time entries found</h3>
<p class="text-base-content/50 text-sm mb-4">Try adjusting your filters or select a different time range.</p>
<a href="/dashboard/tracker" class="btn btn-primary btn-sm">
<Icon name="heroicons:play" class="w-4 h-4" />
Start Tracking Time
</a>
</div>

30
src/pages/dashboard/settings.astro
View File

@@ -30,7 +30,7 @@ const userPasskeys = await db.select()
<DashboardLayout title="Account Settings - Chronus">
<div class="max-w-4xl mx-auto px-4 sm:px-6">
<h1 class="text-2xl sm:text-3xl font-bold mb-6 sm:mb-8 text-primary">
<h1 class="text-2xl font-extrabold tracking-tight mb-6 sm:mb-8">
Account Settings
</h1>
@@ -50,10 +50,10 @@ const userPasskeys = await db.select()
)}
<!-- Profile Information -->
<ProfileForm client:load user={user} />
<ProfileForm client:idle user={user} />
<!-- Change Password -->
<PasswordForm client:load />
<PasswordForm client:idle />
<!-- Passkeys -->
<PasskeyManager client:idle initialPasskeys={userPasskeys.map(pk => ({
@@ -69,25 +69,25 @@ const userPasskeys = await db.select()
createdAt: t.createdAt ? t.createdAt.toISOString() : ''
}))} />
<div class="card bg-base-100 shadow-xl border border-base-200">
<div class="card-body p-4 sm:p-6">
<h2 class="card-title mb-6 text-lg sm:text-xl">
<Icon name="heroicons:information-circle" class="w-5 h-5 sm:w-6 sm:h-6" />
<div class="card card-border bg-base-100">
<div class="card-body p-4">
<h2 class="text-sm font-semibold flex items-center gap-2 mb-4">
<Icon name="heroicons:information-circle" class="w-4 h-4" />
Account Information
</h2>
<div class="space-y-3">
<div class="flex flex-col sm:flex-row sm:justify-between py-3 border-b border-base-300 gap-2 sm:gap-0">
<span class="text-base-content/70 text-sm sm:text-base">Account ID</span>
<span class="font-mono text-xs sm:text-sm break-all">{user.id}</span>
<div class="flex flex-col sm:flex-row sm:justify-between py-3 border-b border-base-200 gap-2 sm:gap-0">
<span class="text-base-content/60 text-sm">Account ID</span>
<span class="font-mono text-xs break-all">{user.id}</span>
</div>
<div class="flex flex-col sm:flex-row sm:justify-between py-3 border-b border-base-300 gap-2 sm:gap-0">
<span class="text-base-content/70 text-sm sm:text-base">Email</span>
<span class="text-sm sm:text-base break-all">{user.email}</span>
<div class="flex flex-col sm:flex-row sm:justify-between py-3 border-b border-base-200 gap-2 sm:gap-0">
<span class="text-base-content/60 text-sm">Email</span>
<span class="text-sm break-all">{user.email}</span>
</div>
<div class="flex flex-col sm:flex-row sm:justify-between py-3 gap-2 sm:gap-0">
<span class="text-base-content/70 text-sm sm:text-base">Site Administrator</span>
<span class={user.isSiteAdmin ? "badge badge-primary" : "badge badge-ghost"}>
<span class="text-base-content/60 text-sm">Site Administrator</span>
<span class={user.isSiteAdmin ? "badge badge-xs badge-primary" : "badge badge-xs badge-ghost"}>
{user.isSiteAdmin ? "Yes" : "No"}
</span>
</div>

54
src/pages/dashboard/team.astro
View File

@@ -5,24 +5,13 @@ import { Icon } from 'astro-icon/components';
import { db } from '../../db';
import { members, users } from '../../db/schema';
import { eq } from 'drizzle-orm';
import { getCurrentTeam } from '../../lib/getCurrentTeam';
const user = Astro.locals.user;
if (!user) return Astro.redirect('/login');
// Get current team from cookie
const currentTeamId = Astro.cookies.get('currentTeamId')?.value;
const userMemberships = await db.select()
.from(members)
.where(eq(members.userId, user.id))
.all();
if (userMemberships.length === 0) return Astro.redirect('/dashboard');
// Use current team or fallback to first membership
const userMembership = currentTeamId
? userMemberships.find(m => m.organizationId === currentTeamId) || userMemberships[0]
: userMemberships[0];
const userMembership = await getCurrentTeam(user, Astro.cookies.get('currentTeamId')?.value);
if (!userMembership) return Astro.redirect('/dashboard');
const teamMembers = await db.select({
member: members,
@@ -39,24 +28,27 @@ const isAdmin = currentUserMember?.member.role === 'owner' || currentUserMember?
<DashboardLayout title="Team - Chronus">
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
<h1 class="text-3xl font-bold">Team Members</h1>
<div>
<h1 class="text-2xl font-extrabold tracking-tight">Team Members</h1>
<p class="text-base-content/60 text-sm mt-1">Manage your organization's team</p>
</div>
<div class="flex gap-2">
{isAdmin && (
<>
<a href="/dashboard/team/settings" class="btn btn-ghost">
<Icon name="heroicons:cog-6-tooth" class="w-5 h-5" />
<a href="/dashboard/team/settings" class="btn btn-ghost btn-sm">
<Icon name="heroicons:cog-6-tooth" class="w-4 h-4" />
Settings
</a>
<a href="/dashboard/team/invite" class="btn btn-primary">Invite Member</a>
<a href="/dashboard/team/invite" class="btn btn-primary btn-sm">Invite Member</a>
</>
)}
</div>
</div>
<div class="card bg-base-100 shadow-xl border border-base-200">
<div class="card-body">
<div class="card card-border bg-base-100">
<div class="card-body p-0">
<div class="overflow-x-auto">
<table class="table">
<table class="table table-sm">
<thead>
<tr>
<th>Name</th>
@@ -68,21 +60,21 @@ const isAdmin = currentUserMember?.member.role === 'owner' || currentUserMember?
</thead>
<tbody>
{teamMembers.map(({ member, user: teamUser }) => (
<tr>
<tr class="hover">
<td>
<div class="flex items-center gap-3">
<Avatar name={teamUser.name} />
<div>
<div class="font-bold">{teamUser.name}</div>
<div class="font-medium">{teamUser.name}</div>
{teamUser.id === user.id && (
<span class="badge badge-sm">You</span>
<span class="badge badge-xs">You</span>
)}
</div>
</div>
</td>
<td>{teamUser.email}</td>
<td class="text-base-content/60">{teamUser.email}</td>
<td>
<span class={`badge ${
<span class={`badge badge-xs ${
member.role === 'owner' ? 'badge-primary' :
member.role === 'admin' ? 'badge-secondary' :
'badge-ghost'
@@ -90,15 +82,15 @@ const isAdmin = currentUserMember?.member.role === 'owner' || currentUserMember?
{member.role}
</span>
</td>
<td>{member.joinedAt?.toLocaleDateString() ?? 'N/A'}</td>
<td class="text-base-content/40">{member.joinedAt?.toLocaleDateString() ?? 'N/A'}</td>
{isAdmin && (
<td>
{teamUser.id !== user.id && member.role !== 'owner' && (
<div class="dropdown dropdown-end">
<label tabindex="0" class="btn btn-ghost btn-sm">
<Icon name="heroicons:ellipsis-vertical" class="w-5 h-5" />
</label>
<ul tabindex="0" class="dropdown-content z-1 menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-200">
<div role="button" tabindex="0" class="btn btn-ghost btn-xs btn-square">
<Icon name="heroicons:ellipsis-vertical" class="w-4 h-4" />
</div>
<ul tabindex="0" class="dropdown-content z-1 menu p-2 bg-base-100 rounded-box w-52 border border-base-200">
<li>
<form method="POST" action={`/api/team/change-role`}>
<input type="hidden" name="userId" value={teamUser.id} />

40
src/pages/dashboard/team/invite.astro
View File

@@ -29,45 +29,39 @@ if (!isAdmin) return Astro.redirect('/dashboard/team');
<DashboardLayout title="Invite Team Member - Chronus">
<div class="max-w-2xl mx-auto">
<h1 class="text-3xl font-bold mb-6">Invite Team Member</h1>
<h1 class="text-2xl font-extrabold tracking-tight mb-6">Invite Team Member</h1>
<form method="POST" action="/api/team/invite" class="card bg-base-100 shadow-xl border border-base-200">
<div class="card-body">
<form method="POST" action="/api/team/invite" class="card card-border bg-base-100">
<div class="card-body p-4">
<div class="alert alert-info mb-4">
<Icon name="heroicons:information-circle" class="w-6 h-6" />
<span>The user must already have an account. They'll be added to your organization.</span>
<Icon name="heroicons:information-circle" class="w-4 h-4 shrink-0" />
<span class="text-sm">The user must already have an account. They'll be added to your organization.</span>
</div>
<div class="form-control">
<label class="label" for="email">
<span class="label-text">Email Address</span>
</label>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Email Address</legend>
<input
type="email"
id="email"
name="email"
placeholder="user@example.com"
class="input input-bordered"
class="input"
required
/>
</div>
</fieldset>
<div class="form-control">
<label class="label" for="role">
<span class="label-text">Role</span>
</label>
<select id="role" name="role" class="select select-bordered" required>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Role</legend>
<select id="role" name="role" class="select" required>
<option value="member">Member</option>
<option value="admin">Admin</option>
</select>
<label class="label">
<span class="label-text-alt">Members can track time. Admins can manage team and clients.</span>
</label>
</div>
<p class="text-xs text-base-content/40 mt-1">Members can track time. Admins can manage team and clients.</p>
</fieldset>
<div class="card-actions justify-end mt-6">
<a href="/dashboard/team" class="btn btn-ghost">Cancel</a>
<button type="submit" class="btn btn-primary">Invite Member</button>
<div class="flex justify-end gap-2 mt-4">
<a href="/dashboard/team" class="btn btn-ghost btn-sm">Cancel</a>
<button type="submit" class="btn btn-primary btn-sm">Invite Member</button>
</div>
</div>
</form>

334
src/pages/dashboard/team/settings.astro
View File

@@ -2,26 +2,15 @@
import DashboardLayout from '../../../layouts/DashboardLayout.astro';
import { Icon } from 'astro-icon/components';
import { db } from '../../../db';
import { categories, members, organizations } from '../../../db/schema';
import { organizations, tags } from '../../../db/schema';
import { eq } from 'drizzle-orm';
import { getCurrentTeam } from '../../../lib/getCurrentTeam';
const user = Astro.locals.user;
if (!user) return Astro.redirect('/login');
// Get current team from cookie
const currentTeamId = Astro.cookies.get('currentTeamId')?.value;
const userMemberships = await db.select()
.from(members)
.where(eq(members.userId, user.id))
.all();
if (userMemberships.length === 0) return Astro.redirect('/dashboard');
// Use current team or fallback to first membership
const userMembership = currentTeamId
? userMemberships.find(m => m.organizationId === currentTeamId) || userMemberships[0]
: userMemberships[0];
const userMembership = await getCurrentTeam(user, Astro.cookies.get('currentTeamId')?.value);
if (!userMembership) return Astro.redirect('/dashboard');
const isAdmin = userMembership.role === 'owner' || userMembership.role === 'admin';
if (!isAdmin) return Astro.redirect('/dashboard/team');
@@ -35,9 +24,11 @@ const organization = await db.select()
if (!organization) return Astro.redirect('/dashboard');
const allCategories = await db.select()
.from(categories)
.where(eq(categories.organizationId, orgId))
const allTags = await db.select()
.from(tags)
.where(eq(tags.organizationId, orgId))
.all();
const url = new URL(Astro.request.url);
@@ -46,42 +37,40 @@ const successType = url.searchParams.get('success');
<DashboardLayout title="Team Settings - Chronus">
<div class="flex items-center gap-3 mb-6">
<a href="/dashboard/team" class="btn btn-ghost btn-sm">
<Icon name="heroicons:arrow-left" class="w-5 h-5" />
<a href="/dashboard/team" class="btn btn-ghost btn-xs">
<Icon name="heroicons:arrow-left" class="w-4 h-4" />
</a>
<h1 class="text-3xl font-bold">Team Settings</h1>
<h1 class="text-2xl font-extrabold tracking-tight">Team Settings</h1>
</div>
<!-- Team Settings -->
<div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
<div class="card-body">
<h2 class="card-title mb-4">
<Icon name="heroicons:building-office-2" class="w-6 h-6" />
<div class="card card-border bg-base-100 mb-6">
<div class="card-body p-4">
<h2 class="text-sm font-semibold flex items-center gap-2 mb-4">
<Icon name="heroicons:building-office-2" class="w-4 h-4" />
Team Settings
</h2>
{successType === 'org-name' && (
<div class="alert alert-success mb-4">
<Icon name="heroicons:check-circle" class="w-6 h-6" />
<span>Team information updated successfully!</span>
<Icon name="heroicons:check-circle" class="w-4 h-4" />
<span class="text-sm">Team information updated successfully!</span>
</div>
)}
<form
action="/api/organizations/update-name"
method="POST"
class="space-y-4"
class="space-y-3"
enctype="multipart/form-data"
>
<input type="hidden" name="organizationId" value={organization.id} />
<div class="form-control">
<div class="label">
<span class="label-text font-medium">Team Logo</span>
</div>
<div class="flex items-center gap-6">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Team Logo</legend>
<div class="flex items-center gap-4">
<div class="avatar placeholder">
<div class="bg-base-200 text-neutral-content rounded-xl w-24 border border-base-300 flex items-center justify-center overflow-hidden">
<div class="bg-base-200 text-neutral-content rounded-xl w-20 border border-base-200 flex items-center justify-center overflow-hidden">
{organization.logoUrl ? (
<img
src={organization.logoUrl}
@@ -91,7 +80,7 @@ const successType = url.searchParams.get('success');
) : (
<Icon
name="heroicons:photo"
class="w-8 h-8 opacity-40 text-base-content"
class="w-6 h-6 opacity-40 text-base-content"
/>
)}
</div>
@@ -101,112 +90,135 @@ const successType = url.searchParams.get('success');
type="file"
name="logo"
accept="image/png, image/jpeg"
class="file-input file-input-bordered w-full max-w-xs"
class="file-input file-input-bordered file-input-sm w-full max-w-xs"
/>
<div class="text-xs text-base-content/60 mt-2">
Upload a company logo (PNG, JPG).
<br />
Will be displayed on invoices and quotes.
</div>
<div class="text-xs text-base-content/40 mt-1">
Upload a company logo (PNG, JPG). Will be displayed on invoices and quotes.
</div>
</div>
</div>
</fieldset>
<label class="form-control">
<div class="label">
<span class="label-text font-medium">Team Name</span>
</div>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Team Name</legend>
<input
type="text"
id="team-name"
name="name"
value={organization.name}
placeholder="Organization name"
class="input input-bordered w-full"
class="input w-full"
required
/>
<div class="label">
<span class="label-text-alt text-base-content/60">This name is visible to all team members</span>
</div>
</label>
<p class="text-xs text-base-content/40 mt-1">This name is visible to all team members</p>
</fieldset>
<div class="divider">Address Information</div>
<div class="divider text-xs text-base-content/40 my-2">Address Information</div>
<label class="form-control">
<div class="label">
<span class="label-text font-medium">Street Address</span>
</div>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Street Address</legend>
<input
type="text"
id="team-street"
name="street"
value={organization.street || ''}
placeholder="123 Main Street"
class="input input-bordered w-full"
class="input w-full"
/>
</label>
</fieldset>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<label class="form-control">
<div class="label">
<span class="label-text font-medium">City</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">City</legend>
<input
type="text"
id="team-city"
name="city"
value={organization.city || ''}
placeholder="City"
class="input input-bordered w-full"
class="input w-full"
/>
</label>
</fieldset>
<label class="form-control">
<div class="label">
<span class="label-text font-medium">State/Province</span>
</div>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">State/Province</legend>
<input
type="text"
id="team-state"
name="state"
value={organization.state || ''}
placeholder="State/Province"
class="input input-bordered w-full"
class="input w-full"
/>
</label>
</fieldset>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<label class="form-control">
<div class="label">
<span class="label-text font-medium">Postal Code</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Postal Code</legend>
<input
type="text"
id="team-zip"
name="zip"
value={organization.zip || ''}
placeholder="12345"
class="input input-bordered w-full"
class="input w-full"
/>
</label>
</fieldset>
<label class="form-control">
<div class="label">
<span class="label-text font-medium">Country</span>
</div>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Country</legend>
<input
type="text"
id="team-country"
name="country"
value={organization.country || ''}
placeholder="Country"
class="input input-bordered w-full"
class="input w-full"
/>
</label>
</fieldset>
</div>
<div class="flex flex-col sm:flex-row justify-between items-center gap-4 mt-6">
<span class="text-xs text-base-content/60 text-center sm:text-left">
<div class="divider text-xs text-base-content/40 my-2">Defaults</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Default Tax Rate (%)</legend>
<input
type="number"
id="default-tax-rate"
name="defaultTaxRate"
step="0.01"
min="0"
max="100"
value={organization.defaultTaxRate || 0}
class="input w-full"
/>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Default Currency</legend>
<select
id="default-currency"
name="defaultCurrency"
class="select w-full"
>
<option value="USD" selected={!organization.defaultCurrency || organization.defaultCurrency === 'USD'}>USD ($)</option>
<option value="EUR" selected={organization.defaultCurrency === 'EUR'}>EUR (€)</option>
<option value="GBP" selected={organization.defaultCurrency === 'GBP'}>GBP (£)</option>
<option value="CAD" selected={organization.defaultCurrency === 'CAD'}>CAD ($)</option>
<option value="AUD" selected={organization.defaultCurrency === 'AUD'}>AUD ($)</option>
</select>
</fieldset>
</div>
<div class="flex flex-col sm:flex-row justify-between items-center gap-3 mt-4">
<span class="text-xs text-base-content/40 text-center sm:text-left">
Address information appears on invoices and quotes
</span>
<button type="submit" class="btn btn-primary w-full sm:w-auto">
<Icon name="heroicons:check" class="w-5 h-5" />
<button type="submit" class="btn btn-primary btn-sm w-full sm:w-auto">
<Icon name="heroicons:check" class="w-4 h-4" />
Save Changes
</button>
</div>
@@ -214,60 +226,142 @@ const successType = url.searchParams.get('success');
</div>
</div>
<!-- Categories Section -->
<div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
<div class="card-body">
<!-- Tags Section -->
<div class="card card-border bg-base-100 mb-6">
<div class="card-body p-4">
<div class="flex justify-between items-center mb-4">
<h2 class="card-title">
<Icon name="heroicons:tag" class="w-6 h-6" />
Work Categories
<h2 class="text-sm font-semibold flex items-center gap-2">
<Icon name="heroicons:tag" class="w-4 h-4" />
Tags & Rates
</h2>
<a href="/dashboard/team/settings/categories/new" class="btn btn-primary btn-sm">
<Icon name="heroicons:plus" class="w-5 h-5" />
Add Category
</a>
<button onclick="document.getElementById('new_tag_modal').showModal()" class="btn btn-primary btn-xs">
<Icon name="heroicons:plus" class="w-3 h-3" />
Add Tag
</button>
</div>
<p class="text-base-content/70 mb-4">
Categories help organize time tracking by type of work. All team members use the same categories.
<p class="text-base-content/60 text-xs mb-4">
Tags can be used to categorize time entries. You can also associate an hourly rate with a tag for billing purposes.
</p>
{allCategories.length === 0 ? (
{allTags.length === 0 ? (
<div class="alert alert-info">
<Icon name="heroicons:information-circle" class="w-6 h-6" />
<Icon name="heroicons:information-circle" class="w-4 h-4" />
<div>
<div class="font-bold">No categories yet</div>
<div class="text-sm">Create your first category to start organizing time entries.</div>
<div class="font-semibold text-sm">No tags yet</div>
<div class="text-xs">Create tags to add context and rates to your time entries.</div>
</div>
</div>
) : (
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{allCategories.map(category => (
<div class="card bg-base-200 border border-base-300">
<div class="card-body p-4">
<div class="flex items-center gap-3">
{category.color && (
<span class="w-4 h-4 rounded-full shrink-0" style={`background-color: ${category.color}`}></span>
<div class="overflow-x-auto">
<table class="table table-sm">
<thead>
<tr>
<th>Name</th>
<th>Rate / Hr</th>
<th class="w-20"></th>
</tr>
</thead>
<tbody>
{allTags.map(tag => (
<tr class="hover">
<td>
<div class="flex items-center gap-2">
{tag.color && (
<div class="w-3 h-3 rounded-full" style={`background-color: ${tag.color}`}></div>
)}
<div class="grow min-w-0">
<h3 class="font-semibold truncate">{category.name}</h3>
<p class="text-xs text-base-content/60">
Created {category.createdAt?.toLocaleDateString() ?? 'N/A'}
</p>
<span class="font-medium">{tag.name}</span>
</div>
<a
href={`/dashboard/team/settings/categories/${category.id}/edit`}
class="btn btn-ghost btn-xs"
</td>
<td>
{tag.rate ? (
<span class="font-mono text-sm">{new Intl.NumberFormat('en-US', { style: 'currency', currency: organization.defaultCurrency || 'USD' }).format(tag.rate / 100)}</span>
) : (
<span class="text-base-content/40 text-xs italic">No rate</span>
)}
</td>
<td>
<div class="flex gap-1">
<button
onclick={`document.getElementById('edit_tag_modal_${tag.id}').showModal()`}
class="btn btn-ghost btn-xs btn-square"
>
<Icon name="heroicons:pencil" class="w-4 h-4" />
</a>
<Icon name="heroicons:pencil" class="w-3 h-3" />
</button>
<form method="POST" action={`/api/tags/${tag.id}/delete`} onsubmit="return confirm('Are you sure you want to delete this tag?');">
<button class="btn btn-ghost btn-xs btn-square text-error">
<Icon name="heroicons:trash" class="w-3 h-3" />
</button>
</form>
</div>
{/* Edit Modal */}
<dialog id={`edit_tag_modal_${tag.id}`} class="modal">
<div class="modal-box">
<h3 class="font-semibold text-base">Edit Tag</h3>
<form method="POST" action={`/api/tags/${tag.id}/update`}>
<fieldset class="fieldset mb-3">
<legend class="fieldset-legend text-xs">Name</legend>
<input type="text" name="name" value={tag.name} class="input w-full" required />
</fieldset>
<fieldset class="fieldset mb-3">
<legend class="fieldset-legend text-xs">Color</legend>
<input type="color" name="color" value={tag.color || '#3b82f6'} class="input w-full h-12 p-1" />
</fieldset>
<fieldset class="fieldset mb-4">
<legend class="fieldset-legend text-xs">Hourly Rate (cents)</legend>
<input type="number" name="rate" value={tag.rate || 0} min="0" class="input w-full" />
<p class="text-xs text-base-content/40 mt-1">Enter rate in cents (e.g. 5000 = $50.00)</p>
</fieldset>
<div class="modal-action">
<button type="button" class="btn btn-sm" onclick={`document.getElementById('edit_tag_modal_${tag.id}').close()`}>Cancel</button>
<button type="submit" class="btn btn-primary btn-sm">Save</button>
</div>
</form>
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
</div>
<dialog id="new_tag_modal" class="modal">
<div class="modal-box">
<h3 class="font-semibold text-base">New Tag</h3>
<form method="POST" action="/api/tags/create">
<input type="hidden" name="organizationId" value={organization.id} />
<fieldset class="fieldset mb-3">
<legend class="fieldset-legend text-xs">Name</legend>
<input type="text" name="name" class="input w-full" required placeholder="e.g. Billable, Rush" />
</fieldset>
<fieldset class="fieldset mb-3">
<legend class="fieldset-legend text-xs">Color</legend>
<input type="color" name="color" value="#3b82f6" class="input w-full h-12 p-1" />
</fieldset>
<fieldset class="fieldset mb-4">
<legend class="fieldset-legend text-xs">Hourly Rate (cents)</legend>
<input type="number" name="rate" value="0" min="0" class="input w-full" />
<p class="text-xs text-base-content/40 mt-1">Enter rate in cents (e.g. 5000 = $50.00)</p>
</fieldset>
<div class="modal-action">
<button type="button" class="btn btn-sm" onclick="document.getElementById('new_tag_modal').close()">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm">Create Tag</button>
</div>
</form>
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
</DashboardLayout>

93
src/pages/dashboard/team/settings/categories/[id]/edit.astro
View File

@@ -1,93 +0,0 @@
---
import DashboardLayout from '../../../../../../layouts/DashboardLayout.astro';
import { Icon } from 'astro-icon/components';
import { db } from '../../../../../../db';
import { categories, members } from '../../../../../../db/schema';
import { eq, and } from 'drizzle-orm';
const user = Astro.locals.user;
if (!user) return Astro.redirect('/login');
const { id } = Astro.params;
// Get current team from cookie
const currentTeamId = Astro.cookies.get('currentTeamId')?.value;
const userMemberships = await db.select()
.from(members)
.where(eq(members.userId, user.id))
.all();
if (userMemberships.length === 0) return Astro.redirect('/dashboard');
// Use current team or fallback to first membership
const userMembership = currentTeamId
? userMemberships.find(m => m.organizationId === currentTeamId) || userMemberships[0]
: userMemberships[0];
const isAdmin = userMembership.role === 'owner' || userMembership.role === 'admin';
if (!isAdmin) return Astro.redirect('/dashboard/team/settings');
const category = await db.select()
.from(categories)
.where(and(
eq(categories.id, id!),
eq(categories.organizationId, userMembership.organizationId)
))
.get();
if (!category) return Astro.redirect('/dashboard/team/settings');
---
<DashboardLayout title="Edit Category - Chronus">
<div class="max-w-2xl mx-auto">
<div class="flex items-center gap-3 mb-6">
<a href="/dashboard/team/settings" class="btn btn-ghost btn-sm">
<Icon name="heroicons:arrow-left" class="w-5 h-5" />
</a>
<h1 class="text-3xl font-bold">Edit Category</h1>
</div>
<form method="POST" action={`/api/categories/${id}/update`} class="card bg-base-200 shadow-xl border border-base-300">
<div class="card-body">
<div class="form-control">
<label class="label pb-2" for="name">
<span class="label-text font-medium">Category Name</span>
</label>
<input
type="text"
id="name"
name="name"
value={category.name}
placeholder="Development"
class="input input-bordered w-full"
required
/>
</div>
<div class="form-control">
<label class="label pb-2" for="color">
<span class="label-text font-medium">Color (optional)</span>
</label>
<input
type="color"
id="color"
name="color"
value={category.color || '#3b82f6'}
class="input input-bordered w-full h-12"
/>
</div>
<div class="card-actions justify-between mt-6">
<form method="POST" action={`/api/categories/${id}/delete`}>
<button type="submit" class="btn btn-error btn-outline">Delete Category</button>
</form>
<div class="flex gap-2">
<a href="/dashboard/team/settings" class="btn btn-ghost">Cancel</a>
<button type="submit" class="btn btn-primary">Save Changes</button>
</div>
</div>
</div>
</form>
</div>
</DashboardLayout>

53
src/pages/dashboard/team/settings/categories/new.astro
View File

@@ -1,53 +0,0 @@
---
import DashboardLayout from '../../../../../layouts/DashboardLayout.astro';
import { Icon } from 'astro-icon/components';
const user = Astro.locals.user;
if (!user) return Astro.redirect('/login');
---
<DashboardLayout title="New Category - Chronus">
<div class="max-w-2xl mx-auto">
<div class="flex items-center gap-3 mb-6">
<a href="/dashboard/team/settings" class="btn btn-ghost btn-sm">
<Icon name="heroicons:arrow-left" class="w-5 h-5" />
</a>
<h1 class="text-3xl font-bold">Add New Category</h1>
</div>
<form method="POST" action="/api/categories/create" class="card bg-base-200 shadow-xl border border-base-300">
<div class="card-body">
<div class="form-control">
<label class="label pb-2" for="name">
<span class="label-text font-medium">Category Name</span>
</label>
<input
type="text"
id="name"
name="name"
placeholder="Development"
class="input input-bordered w-full"
required
/>
</div>
<div class="form-control">
<label class="label pb-2" for="color">
<span class="label-text font-medium">Color (optional)</span>
</label>
<input
type="color"
id="color"
name="color"
class="input input-bordered w-full h-12"
/>
</div>
<div class="card-actions justify-end mt-6">
<a href="/dashboard/team/settings" class="btn btn-ghost">Cancel</a>
<button type="submit" class="btn btn-primary">Create Category</button>
</div>
</div>
</form>
</div>
</DashboardLayout>

218
src/pages/dashboard/tracker.astro
View File

@@ -4,27 +4,16 @@ import { Icon } from 'astro-icon/components';
import Timer from '../../components/Timer.vue';
import ManualEntry from '../../components/ManualEntry.vue';
import { db } from '../../db';
import { timeEntries, clients, members, tags, timeEntryTags, categories, users } from '../../db/schema';
import { timeEntries, clients, tags, users } from '../../db/schema';
import { eq, desc, asc, and, sql, or, like } from 'drizzle-orm';
import { formatTimeRange } from '../../lib/formatTime';
import { getCurrentTeam } from '../../lib/getCurrentTeam';
const user = Astro.locals.user;
if (!user) return Astro.redirect('/login');
// Get current team from cookie
const currentTeamId = Astro.cookies.get('currentTeamId')?.value;
const userMemberships = await db.select()
.from(members)
.where(eq(members.userId, user.id))
.all();
if (userMemberships.length === 0) return Astro.redirect('/dashboard');
// Use current team or fallback to first membership
const userMembership = currentTeamId
? userMemberships.find(m => m.organizationId === currentTeamId) || userMemberships[0]
: userMemberships[0];
const userMembership = await getCurrentTeam(user, Astro.cookies.get('currentTeamId')?.value);
if (!userMembership) return Astro.redirect('/dashboard');
const organizationId = userMembership.organizationId;
@@ -33,11 +22,6 @@ const allClients = await db.select()
.where(eq(clients.organizationId, organizationId))
.all();
const allCategories = await db.select()
.from(categories)
.where(eq(categories.organizationId, organizationId))
.all();
const allTags = await db.select()
.from(tags)
.where(eq(tags.organizationId, organizationId))
@@ -50,7 +34,7 @@ const pageSize = 20;
const offset = (page - 1) * pageSize;
const filterClient = url.searchParams.get('client') || '';
const filterCategory = url.searchParams.get('category') || '';
const filterStatus = url.searchParams.get('status') || '';
const filterType = url.searchParams.get('type') || '';
const sortBy = url.searchParams.get('sort') || 'start-desc';
@@ -62,10 +46,6 @@ if (filterClient) {
conditions.push(eq(timeEntries.clientId, filterClient));
}
if (filterCategory) {
conditions.push(eq(timeEntries.categoryId, filterCategory));
}
if (filterStatus === 'completed') {
conditions.push(sql`${timeEntries.endTime} IS NOT NULL`);
} else if (filterStatus === 'running') {
@@ -107,13 +87,13 @@ switch (sortBy) {
const entries = await db.select({
entry: timeEntries,
client: clients,
category: categories,
user: users,
tag: tags,
})
.from(timeEntries)
.leftJoin(clients, eq(timeEntries.clientId, clients.id))
.leftJoin(categories, eq(timeEntries.categoryId, categories.id))
.leftJoin(users, eq(timeEntries.userId, users.id))
.leftJoin(tags, eq(timeEntries.tagId, tags.id))
.where(and(...conditions))
.orderBy(orderBy)
.limit(pageSize)
@@ -123,9 +103,11 @@ const entries = await db.select({
const runningEntry = await db.select({
entry: timeEntries,
client: clients,
tag: tags,
})
.from(timeEntries)
.leftJoin(clients, eq(timeEntries.clientId, clients.id))
.leftJoin(tags, eq(timeEntries.tagId, tags.id))
.where(and(
eq(timeEntries.userId, user.id),
sql`${timeEntries.endTime} IS NULL`
@@ -157,24 +139,18 @@ const paginationPages = getPaginationPages(page, totalPages);
---
<DashboardLayout title="Time Tracker - Chronus">
<h1 class="text-3xl font-bold mb-6">Time Tracker</h1>
<h1 class="text-2xl font-extrabold tracking-tight mb-6">Time Tracker</h1>
<!-- Tabs for Timer and Manual Entry -->
<div role="tablist" class="tabs tabs-lifted mb-6">
<input type="radio" name="tracker_tabs" role="tab" class="tab text-base font-medium gap-2" aria-label="Timer" checked />
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
<div class="tabs tabs-lift mb-6">
<input type="radio" name="tracker_tabs" class="tab" aria-label="Timer" checked="checked" />
<div class="tab-content bg-base-100 border-base-300 p-6">
{allClients.length === 0 ? (
<div class="alert alert-warning flex flex-col sm:flex-row items-center gap-4">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
<Icon name="heroicons:exclamation-triangle" class="stroke-current shrink-0 h-6 w-6" />
<span class="flex-1 text-center sm:text-left">You need to create a client before tracking time.</span>
<a href="/dashboard/clients/new" class="btn btn-sm btn-primary whitespace-nowrap">Add Client</a>
</div>
) : allCategories.length === 0 ? (
<div class="alert alert-warning flex flex-col sm:flex-row items-center gap-4">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
<span class="flex-1 text-center sm:text-left">You need to create a category before tracking time.</span>
<a href="/dashboard/team/settings" class="btn btn-sm btn-primary whitespace-nowrap">Team Settings</a>
</div>
) : (
<Timer
client:load
@@ -182,34 +158,26 @@ const paginationPages = getPaginationPages(page, totalPages);
startTime: runningEntry.entry.startTime.getTime(),
description: runningEntry.entry.description,
clientId: runningEntry.entry.clientId,
categoryId: runningEntry.entry.categoryId,
tagId: runningEntry.tag?.id,
} : null}
clients={allClients.map(c => ({ id: c.id, name: c.name }))}
categories={allCategories.map(c => ({ id: c.id, name: c.name, color: c.color }))}
tags={allTags.map(t => ({ id: t.id, name: t.name, color: t.color }))}
/>
)}
</div>
<input type="radio" name="tracker_tabs" role="tab" class="tab text-base font-medium gap-2" aria-label="Manual Entry" />
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
<input type="radio" name="tracker_tabs" class="tab" aria-label="Manual Entry" />
<div class="tab-content bg-base-100 border-base-300 p-6">
{allClients.length === 0 ? (
<div class="alert alert-warning flex flex-col sm:flex-row items-center gap-4">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
<Icon name="heroicons:exclamation-triangle" class="stroke-current shrink-0 h-6 w-6" />
<span class="flex-1 text-center sm:text-left">You need to create a client before adding time entries.</span>
<a href="/dashboard/clients/new" class="btn btn-sm btn-primary whitespace-nowrap">Add Client</a>
</div>
) : allCategories.length === 0 ? (
<div class="alert alert-warning flex flex-col sm:flex-row items-center gap-4">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
<span class="flex-1 text-center sm:text-left">You need to create a category before adding time entries.</span>
<a href="/dashboard/team/settings" class="btn btn-sm btn-primary whitespace-nowrap">Team Settings</a>
</div>
) : (
<ManualEntry
client:idle
clients={allClients.map(c => ({ id: c.id, name: c.name }))}
categories={allCategories.map(c => ({ id: c.id, name: c.name, color: c.color }))}
tags={allTags.map(t => ({ id: t.id, name: t.name, color: t.color }))}
/>
)}
@@ -221,27 +189,24 @@ const paginationPages = getPaginationPages(page, totalPages);
) : null}
<!-- Filters and Search -->
<div class="card bg-base-200/50 backdrop-blur-sm shadow-lg border border-base-300/50 hover:border-base-300 transition-all duration-200 mb-6">
<div class="card-body">
<form method="GET" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4">
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Search</span>
</label>
<div class="card card-border bg-base-100 mb-6">
<div class="card-body p-4">
<form method="GET" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-3">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Search</legend>
<input
type="text"
id="tracker-search"
name="search"
placeholder="Search descriptions..."
class="input input-bordered bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors w-full"
class="input w-full"
value={searchTerm}
/>
</div>
</fieldset>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Client</span>
</label>
<select name="client" class="select select-bordered bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors w-full" onchange="this.form.submit()">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Client</legend>
<select id="tracker-client" name="client" class="select w-full" onchange="this.form.submit()">
<option value="">All Clients</option>
{allClients.map(client => (
<option value={client.id} selected={filterClient === client.id}>
@@ -249,60 +214,40 @@ const paginationPages = getPaginationPages(page, totalPages);
</option>
))}
</select>
</div>
</fieldset>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Category</span>
</label>
<select name="category" class="select select-bordered bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors w-full" onchange="this.form.submit()">
<option value="">All Categories</option>
{allCategories.map(category => (
<option value={category.id} selected={filterCategory === category.id}>
{category.name}
</option>
))}
</select>
</div>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Status</span>
</label>
<select name="status" class="select select-bordered bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors w-full" onchange="this.form.submit()">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Status</legend>
<select id="tracker-status" name="status" class="select w-full" onchange="this.form.submit()">
<option value="" selected={filterStatus === ''}>All Entries</option>
<option value="completed" selected={filterStatus === 'completed'}>Completed</option>
<option value="running" selected={filterStatus === 'running'}>Running</option>
</select>
</div>
</fieldset>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Entry Type</span>
</label>
<select name="type" class="select select-bordered bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors w-full" onchange="this.form.submit()">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Entry Type</legend>
<select id="tracker-type" name="type" class="select w-full" onchange="this.form.submit()">
<option value="" selected={filterType === ''}>All Types</option>
<option value="timed" selected={filterType === 'timed'}>Timed</option>
<option value="manual" selected={filterType === 'manual'}>Manual</option>
</select>
</div>
</fieldset>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Sort By</span>
</label>
<select name="sort" class="select select-bordered bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors w-full" onchange="this.form.submit()">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Sort By</legend>
<select id="tracker-sort" name="sort" class="select w-full" onchange="this.form.submit()">
<option value="start-desc" selected={sortBy === 'start-desc'}>Newest First</option>
<option value="start-asc" selected={sortBy === 'start-asc'}>Oldest First</option>
<option value="duration-desc" selected={sortBy === 'duration-desc'}>Longest Duration</option>
<option value="duration-asc" selected={sortBy === 'duration-asc'}>Shortest Duration</option>
</select>
</div>
</fieldset>
<input type="hidden" name="page" value="1" />
<div class="form-control md:col-span-2 lg:col-span-6">
<button type="submit" class="btn btn-primary shadow-lg shadow-primary/20 hover:shadow-xl hover:shadow-primary/30 transition-all">
<Icon name="heroicons:magnifying-glass" class="w-5 h-5" />
<div class="flex items-end md:col-span-2 lg:col-span-1">
<button type="submit" class="btn btn-primary btn-sm w-full">
<Icon name="heroicons:magnifying-glass" class="w-4 h-4" />
Search
</button>
</div>
@@ -310,27 +255,26 @@ const paginationPages = getPaginationPages(page, totalPages);
</div>
</div>
<div class="card bg-base-200/30 backdrop-blur-sm shadow-lg border border-base-300/50 hover:border-base-300 transition-all duration-200">
<div class="card-body">
<div class="flex justify-between items-center mb-4">
<h2 class="card-title">
<Icon name="heroicons:list-bullet" class="w-6 h-6" />
<div class="card card-border bg-base-100">
<div class="card-body p-4">
<div class="flex justify-between items-center mb-3">
<h2 class="text-sm font-semibold flex items-center gap-2">
<Icon name="heroicons:list-bullet" class="w-4 h-4" />
Time Entries ({totalCount?.count || 0} total)
</h2>
{(filterClient || filterCategory || filterStatus || filterType || searchTerm) && (
<a href="/dashboard/tracker" class="btn btn-sm btn-ghost hover:bg-base-300/50 transition-colors">
<Icon name="heroicons:x-mark" class="w-4 h-4" />
{(filterClient || filterStatus || filterType || searchTerm) && (
<a href="/dashboard/tracker" class="btn btn-xs btn-ghost">
<Icon name="heroicons:x-mark" class="w-3 h-3" />
Clear Filters
</a>
)}
</div>
<div class="overflow-x-auto">
<table class="table table-zebra">
<table class="table table-sm">
<thead>
<tr class="bg-base-300/30">
<tr>
<th>Type</th>
<th>Client</th>
<th>Category</th>
<th>Description</th>
<th>Member</th>
<th>Start Time</th>
@@ -340,35 +284,27 @@ const paginationPages = getPaginationPages(page, totalPages);
</tr>
</thead>
<tbody>
{entries.map(({ entry, client, category, user: entryUser }) => (
<tr class="hover:bg-base-300/20 transition-colors">
{entries.map(({ entry, client, user: entryUser }) => (
<tr class="hover">
<td>
{entry.isManual ? (
<span class="badge badge-info badge-sm gap-1 shadow-sm" title="Manual Entry">
<span class="badge badge-info badge-xs gap-1" title="Manual Entry">
<Icon name="heroicons:pencil" class="w-3 h-3" />
Manual
</span>
) : (
<span class="badge badge-success badge-sm gap-1 shadow-sm" title="Timed Entry">
<span class="badge badge-success badge-xs gap-1" title="Timed Entry">
<Icon name="heroicons:clock" class="w-3 h-3" />
Timed
</span>
)}
</td>
<td class="font-medium">{client?.name || 'Unknown'}</td>
<td>
{category ? (
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded-full shadow-sm" style={`background-color: ${category.color}`}></span>
<span>{category.name}</span>
</div>
) : '-'}
</td>
<td class="text-base-content/80">{entry.description || '-'}</td>
<td class="text-base-content/60">{entry.description || '-'}</td>
<td>{entryUser?.name || 'Unknown'}</td>
<td class="whitespace-nowrap">
{entry.startTime.toLocaleDateString()}<br/>
<span class="text-xs opacity-50">
<span class="text-xs text-base-content/40">
{entry.startTime.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
</span>
</td>
@@ -376,23 +312,23 @@ const paginationPages = getPaginationPages(page, totalPages);
{entry.endTime ? (
<>
{entry.endTime.toLocaleDateString()}<br/>
<span class="text-xs opacity-50">
<span class="text-xs text-base-content/40">
{entry.endTime.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
</span>
</>
) : (
<span class="badge badge-success shadow-sm">Running</span>
<span class="badge badge-success badge-xs">Running</span>
)}
</td>
<td class="font-mono font-semibold text-primary">{formatTimeRange(entry.startTime, entry.endTime)}</td>
<td class="font-mono font-semibold text-primary text-sm">{formatTimeRange(entry.startTime, entry.endTime)}</td>
<td>
<form method="POST" action={`/api/time-entries/${entry.id}/delete`} class="inline">
<button
type="submit"
class="btn btn-ghost btn-sm text-error hover:bg-error/10 transition-colors"
class="btn btn-ghost btn-xs text-error"
onclick="return confirm('Are you sure you want to delete this entry?')"
>
<Icon name="heroicons:trash" class="w-4 h-4" />
<Icon name="heroicons:trash" class="w-3.5 h-3.5" />
</button>
</form>
</td>
@@ -404,20 +340,20 @@ const paginationPages = getPaginationPages(page, totalPages);
<!-- Pagination -->
{totalPages > 1 && (
<div class="flex justify-center items-center gap-2 mt-6">
<div class="flex justify-center items-center gap-1 mt-4">
<a
href={`?page=${Math.max(1, page - 1)}${filterClient ? `&client=${filterClient}` : ''}${filterCategory ? `&category=${filterCategory}` : ''}${filterStatus ? `&status=${filterStatus}` : ''}${filterType ? `&type=${filterType}` : ''}${sortBy ? `&sort=${sortBy}` : ''}${searchTerm ? `&search=${searchTerm}` : ''}`}
class={`btn btn-sm transition-all ${page === 1 ? 'btn-disabled' : 'hover:bg-base-300/50'}`}
href={`?page=${Math.max(1, page - 1)}${filterClient ? `&client=${filterClient}` : ''}${filterStatus ? `&status=${filterStatus}` : ''}${filterType ? `&type=${filterType}` : ''}${sortBy ? `&sort=${sortBy}` : ''}${searchTerm ? `&search=${searchTerm}` : ''}`}
class={`btn btn-xs ${page === 1 ? 'btn-disabled' : ''}`}
>
<Icon name="heroicons:chevron-left" class="w-4 h-4" />
Previous
<Icon name="heroicons:chevron-left" class="w-3 h-3" />
Prev
</a>
<div class="flex gap-1">
<div class="flex gap-0.5">
{paginationPages.map(pageNum => (
<a
href={`?page=${pageNum}${filterClient ? `&client=${filterClient}` : ''}${filterCategory ? `&category=${filterCategory}` : ''}${filterStatus ? `&status=${filterStatus}` : ''}${filterType ? `&type=${filterType}` : ''}${sortBy ? `&sort=${sortBy}` : ''}${searchTerm ? `&search=${searchTerm}` : ''}`}
class={`btn btn-sm transition-all ${page === pageNum ? 'btn-active' : 'hover:bg-base-300/50'}`}
href={`?page=${pageNum}${filterClient ? `&client=${filterClient}` : ''}${filterStatus ? `&status=${filterStatus}` : ''}${filterType ? `&type=${filterType}` : ''}${sortBy ? `&sort=${sortBy}` : ''}${searchTerm ? `&search=${searchTerm}` : ''}`}
class={`btn btn-xs ${page === pageNum ? 'btn-active' : ''}`}
>
{pageNum}
</a>
@@ -425,11 +361,11 @@ const paginationPages = getPaginationPages(page, totalPages);
</div>
<a
href={`?page=${Math.min(totalPages, page + 1)}${filterClient ? `&client=${filterClient}` : ''}${filterCategory ? `&category=${filterCategory}` : ''}${filterStatus ? `&status=${filterStatus}` : ''}${filterType ? `&type=${filterType}` : ''}${sortBy ? `&sort=${sortBy}` : ''}${searchTerm ? `&search=${searchTerm}` : ''}`}
class={`btn btn-sm transition-all ${page === totalPages ? 'btn-disabled' : 'hover:bg-base-300/50'}`}
href={`?page=${Math.min(totalPages, page + 1)}${filterClient ? `&client=${filterClient}` : ''}${filterStatus ? `&status=${filterStatus}` : ''}${filterType ? `&type=${filterType}` : ''}${sortBy ? `&sort=${sortBy}` : ''}${searchTerm ? `&search=${searchTerm}` : ''}`}
class={`btn btn-xs ${page === totalPages ? 'btn-disabled' : ''}`}
>
Next
<Icon name="heroicons:chevron-right" class="w-4 h-4" />
<Icon name="heroicons:chevron-right" class="w-3 h-3" />
</a>
</div>
)}

70
src/pages/index.astro
View File

@@ -7,48 +7,64 @@ if (Astro.locals.user) {
---
<Layout title="Chronus - Time Tracking">
<div class="hero flex-1 bg-linear-to-br from-base-100 via-base-200 to-base-300 flex items-center justify-center py-12">
<div class="hero-content text-center">
<div class="max-w-4xl">
<img src="/logo.webp" alt="Chronus Logo" class="h-24 w-24 mx-auto mb-6" />
<h1 class="text-6xl md:text-7xl font-bold mb-6 text-primary">
Chronus
<div class="flex-1 flex flex-col">
<!-- Hero -->
<div class="flex-1 flex items-center justify-center px-4 py-16 sm:py-24 bg-base-100">
<div class="max-w-3xl text-center">
<img src="/logo.webp" alt="Chronus Logo" class="h-20 w-20 mx-auto mb-8" />
<h1 class="text-5xl sm:text-6xl lg:text-7xl font-extrabold tracking-tight text-base-content mb-4">
Track time,<br />
<span class="text-primary">effortlessly.</span>
</h1>
<p class="text-xl md:text-2xl py-6 text-base-content/80 font-light max-w-2xl mx-auto">
<p class="text-lg sm:text-xl text-base-content/60 max-w-xl mx-auto mb-10 leading-relaxed">
Modern time tracking designed for teams that value simplicity and precision.
</p>
<div class="flex gap-4 justify-center mt-8 flex-wrap">
<a href="/signup" class="btn btn-primary btn-lg">
<div class="flex gap-3 justify-center flex-wrap">
<a href="/signup" class="btn btn-primary btn-lg px-8">
Get Started
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
<a href="/login" class="btn btn-outline btn-lg">Login</a>
<a href="/login" class="btn btn-ghost btn-lg px-8">Login</a>
</div>
</div>
</div>
<!-- Feature highlights -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16">
<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
<div class="card-body items-start">
<div class="text-4xl mb-3">⚡</div>
<h3 class="card-title text-lg">Lightning Fast</h3>
<p class="text-sm text-base-content/70">Track tasks with a single click.</p>
<!-- Features -->
<div class="bg-base-200/50 border-t border-base-200 px-4 py-16 sm:py-20">
<div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="card bg-base-100 card-border">
<div class="card-body">
<div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center mb-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" />
</svg>
</div>
<h3 class="card-title text-base">Lightning Fast</h3>
<p class="text-sm text-base-content/60">Track tasks with a single click. Start, stop, and organize in seconds.</p>
</div>
</div>
<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
<div class="card-body items-start">
<div class="text-4xl mb-3">📊</div>
<h3 class="card-title text-lg">Detailed Reports</h3>
<p class="text-sm text-base-content/70">Get actionable insights into your team's tasks.</p>
<div class="card bg-base-100 card-border">
<div class="card-body">
<div class="w-10 h-10 rounded-lg bg-secondary/10 flex items-center justify-center mb-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-secondary" viewBox="0 0 20 20" fill="currentColor">
<path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
</svg>
</div>
<h3 class="card-title text-base">Detailed Reports</h3>
<p class="text-sm text-base-content/60">Get actionable insights with charts, filters, and CSV exports.</p>
</div>
</div>
<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
<div class="card-body items-start">
<div class="text-4xl mb-3">👥</div>
<h3 class="card-title text-lg">Team Collaboration</h3>
<p class="text-sm text-base-content/70">Built for multiple team members.</p>
<div class="card bg-base-100 card-border">
<div class="card-body">
<div class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center mb-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-accent" viewBox="0 0 20 20" fill="currentColor">
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z" />
</svg>
</div>
<h3 class="card-title text-base">Team Collaboration</h3>
<p class="text-sm text-base-content/60">Built for teams with roles, permissions, and shared workspaces.</p>
</div>
</div>
</div>

48
src/pages/login.astro
View File

@@ -18,60 +18,58 @@ const errorMessage =
<Layout title="Login - Chronus">
<div class="flex justify-center items-center flex-1 bg-base-100">
<div class="card bg-base-100 shadow-2xl w-full max-w-md mx-4">
<div class="card-body">
<img src="/logo.webp" alt="Chronus" class="h-16 w-16 mx-auto mb-4" />
<h2 class="text-3xl font-bold text-center mb-2">Welcome Back</h2>
<p class="text-center text-base-content/60 mb-6">Sign in to continue to Chronus</p>
<div class="card card-border bg-base-100 w-full max-w-sm mx-4">
<div class="card-body gap-0">
<img src="/logo.webp" alt="Chronus" class="h-14 w-14 mx-auto mb-3" />
<h2 class="text-2xl font-extrabold tracking-tight text-center">Welcome Back</h2>
<p class="text-center text-base-content/60 text-sm mt-1 mb-5">Sign in to continue to Chronus</p>
{errorMessage && (
<div role="alert" class="alert alert-error mb-4">
<Icon name="heroicons:exclamation-circle" class="w-6 h-6" />
<div role="alert" class="alert alert-error mb-4 text-sm">
<Icon name="heroicons:exclamation-circle" class="w-5 h-5" />
<span>{errorMessage}</span>
</div>
)}
<form action="/api/auth/login" method="POST" class="space-y-4">
<label class="form-control">
<div class="label">
<span class="label-text font-medium">Email</span>
</div>
<form action="/api/auth/login" method="POST" class="space-y-3">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Email</legend>
<input
type="email"
id="email"
name="email"
placeholder="your@email.com"
class="input input-bordered w-full"
class="input w-full"
autocomplete="email"
required
/>
</label>
</fieldset>
<label class="form-control">
<div class="label">
<span class="label-text font-medium">Password</span>
</div>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Password</legend>
<input
type="password"
id="password"
name="password"
placeholder="Enter your password"
class="input input-bordered w-full"
class="input w-full"
autocomplete="current-password"
required
/>
</label>
</fieldset>
<button class="btn btn-primary w-full mt-6">Sign In</button>
<button class="btn btn-primary w-full my-4">Sign In</button>
</form>
<PasskeyLogin client:idle />
<div class="divider">OR</div>
<div class="divider text-xs">OR</div>
<div class="text-center">
<p class="text-sm text-base-content/70">
<p class="text-center text-sm text-base-content/60">
Don't have an account?
<a href="/signup" class="link link-primary font-semibold">Create one</a>
</p>
</div>
</div>
</div>
</div>
</Layout>

70
src/pages/signup.astro
View File

@@ -34,86 +34,82 @@ const errorMessage =
<Layout title="Sign Up - Chronus">
<div class="flex justify-center items-center flex-1 bg-base-100">
<div class="card bg-base-100 shadow-2xl w-full max-w-md mx-4">
<div class="card-body">
<img src="/logo.webp" alt="Chronus" class="h-16 w-16 mx-auto mb-4" />
<h2 class="text-3xl font-bold text-center mb-2">Create Account</h2>
<p class="text-center text-base-content/60 mb-6">Join Chronus to start tracking time</p>
<div class="card card-border bg-base-100 w-full max-w-sm mx-4">
<div class="card-body gap-0">
<img src="/logo.webp" alt="Chronus" class="h-14 w-14 mx-auto mb-3" />
<h2 class="text-2xl font-extrabold tracking-tight text-center">Create Account</h2>
<p class="text-center text-base-content/60 text-sm mt-1 mb-5">Join Chronus to start tracking time</p>
{errorMessage && (
<div role="alert" class="alert alert-error mb-4">
<Icon name="heroicons:exclamation-circle" class="w-6 h-6" />
<div role="alert" class="alert alert-error mb-4 text-sm">
<Icon name="heroicons:exclamation-circle" class="w-5 h-5" />
<span>{errorMessage}</span>
</div>
)}
{registrationDisabled ? (
<>
<div class="alert alert-warning">
<Icon name="heroicons:exclamation-triangle" class="w-6 h-6" />
<div class="alert alert-warning text-sm">
<Icon name="heroicons:exclamation-triangle" class="w-5 h-5" />
<span>Registration is currently disabled by the site administrator.</span>
</div>
<div class="divider"></div>
<div class="text-center">
<p class="text-sm text-base-content/70">
<div class="divider text-xs"></div>
<p class="text-center text-sm text-base-content/60">
Already have an account?
<a href="/login" class="link link-primary font-semibold">Sign in</a>
</p>
</div>
</>
) : (
<>
<form action="/api/auth/signup" method="POST" class="space-y-4">
<label class="form-control">
<div class="label">
<span class="label-text font-medium">Full Name</span>
</div>
<form action="/api/auth/signup" method="POST" class="space-y-3">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Full Name</legend>
<input
type="text"
id="name"
name="name"
placeholder="John Doe"
class="input input-bordered w-full"
class="input w-full"
autocomplete="name"
required
/>
</label>
</fieldset>
<label class="form-control">
<div class="label">
<span class="label-text font-medium">Email</span>
</div>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Email</legend>
<input
type="email"
id="email"
name="email"
placeholder="your@email.com"
class="input input-bordered w-full"
class="input w-full"
autocomplete="email"
required
/>
</label>
</fieldset>
<label class="form-control">
<div class="label">
<span class="label-text font-medium">Password</span>
</div>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Password</legend>
<input
type="password"
id="password"
name="password"
placeholder="Create a strong password"
class="input input-bordered w-full"
class="input w-full"
autocomplete="new-password"
required
/>
</label>
</fieldset>
<button class="btn btn-primary w-full mt-6">Create Account</button>
<button class="btn btn-primary w-full mt-4">Create Account</button>
</form>
<div class="divider">OR</div>
<div class="divider text-xs">OR</div>
<div class="text-center">
<p class="text-sm text-base-content/70">
<p class="text-center text-sm text-base-content/60">
Already have an account?
<a href="/login" class="link link-primary font-semibold">Sign in</a>
</p>
</div>
</>
)}
</div>

6
src/pages/uploads/[...path].ts
View File

@@ -52,10 +52,8 @@ export const GET: APIRoute = async ({ params }) => {
case ".gif":
contentType = "image/gif";
break;
case ".svg":
contentType = "image/svg+xml";
break;
// WebP is intentionally omitted as it is not supported in PDF generation
// SVG excluded to prevent stored XSS
// WebP omitted — not supported in PDF generation
}
return new Response(fileContent, {

14
src/styles/global.css
View File

@@ -2,4 +2,16 @@
@plugin "daisyui" {
themes: false;
}
@plugin "./theme.ts";
@plugin "./theme-dark.ts";
@plugin "./theme-light.ts";
/* Smoother transitions globally */
@layer base {
* {
@apply transition-colors duration-150;
}
/* Opt out for elements where color transitions are unwanted */
input, select, textarea, progress, .loading, .countdown, svg {
transition: none;
}
}

0
src/styles/theme.ts → src/styles/theme-dark.ts
View File

9
src/styles/theme-light.ts Normal file
View File

@@ -0,0 +1,9 @@
import { createCatppuccinPlugin } from "@catppuccin/daisyui";
export default createCatppuccinPlugin(
"latte",
{},
{
default: false,
},
);