feat: due dates, subtasks, and task detail page (HQ-{number} URLs)
- Schema: added due_date and subtasks JSONB columns to tasks
- API: CRUD endpoints for subtasks (/tasks/:id/subtasks)
- API: due date support in create/update task
- TaskDetailPanel: due date picker with overdue/soon badges
- TaskDetailPanel: subtask checklist with progress bar
- TaskPage: full-page task view at /task/HQ-{number}
- Dashboard: task cards link to detail page, show subtask progress & due date badges
- Migration: 0001_mighty_callisto.sql
This commit is contained in:
2
backend/drizzle/0001_mighty_callisto.sql
Normal file
2
backend/drizzle/0001_mighty_callisto.sql
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
ALTER TABLE "tasks" ADD COLUMN IF NOT EXISTS "due_date" timestamp with time zone;--> statement-breakpoint
|
||||||
|
ALTER TABLE "tasks" ADD COLUMN IF NOT EXISTS "subtasks" jsonb DEFAULT '[]'::jsonb;
|
||||||
576
backend/drizzle/meta/0001_snapshot.json
Normal file
576
backend/drizzle/meta/0001_snapshot.json
Normal file
@@ -0,0 +1,576 @@
|
|||||||
|
{
|
||||||
|
"id": "00cb3823-7607-4e8d-ba6a-694ca93dc3d8",
|
||||||
|
"prevId": "bf5b044c-8c7f-4838-8a0d-8afbfd63d05c",
|
||||||
|
"version": "7",
|
||||||
|
"dialect": "postgresql",
|
||||||
|
"tables": {
|
||||||
|
"public.accounts": {
|
||||||
|
"name": "accounts",
|
||||||
|
"schema": "",
|
||||||
|
"columns": {
|
||||||
|
"id": {
|
||||||
|
"name": "id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": true,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"account_id": {
|
||||||
|
"name": "account_id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"provider_id": {
|
||||||
|
"name": "provider_id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"user_id": {
|
||||||
|
"name": "user_id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"access_token": {
|
||||||
|
"name": "access_token",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"refresh_token": {
|
||||||
|
"name": "refresh_token",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"id_token": {
|
||||||
|
"name": "id_token",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"access_token_expires_at": {
|
||||||
|
"name": "access_token_expires_at",
|
||||||
|
"type": "timestamp with time zone",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"refresh_token_expires_at": {
|
||||||
|
"name": "refresh_token_expires_at",
|
||||||
|
"type": "timestamp with time zone",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"scope": {
|
||||||
|
"name": "scope",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"password": {
|
||||||
|
"name": "password",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"created_at": {
|
||||||
|
"name": "created_at",
|
||||||
|
"type": "timestamp with time zone",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"default": "now()"
|
||||||
|
},
|
||||||
|
"updated_at": {
|
||||||
|
"name": "updated_at",
|
||||||
|
"type": "timestamp with time zone",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"default": "now()"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"indexes": {},
|
||||||
|
"foreignKeys": {
|
||||||
|
"accounts_user_id_users_id_fk": {
|
||||||
|
"name": "accounts_user_id_users_id_fk",
|
||||||
|
"tableFrom": "accounts",
|
||||||
|
"tableTo": "users",
|
||||||
|
"columnsFrom": [
|
||||||
|
"user_id"
|
||||||
|
],
|
||||||
|
"columnsTo": [
|
||||||
|
"id"
|
||||||
|
],
|
||||||
|
"onDelete": "no action",
|
||||||
|
"onUpdate": "no action"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"compositePrimaryKeys": {},
|
||||||
|
"uniqueConstraints": {},
|
||||||
|
"policies": {},
|
||||||
|
"checkConstraints": {},
|
||||||
|
"isRLSEnabled": false
|
||||||
|
},
|
||||||
|
"public.projects": {
|
||||||
|
"name": "projects",
|
||||||
|
"schema": "",
|
||||||
|
"columns": {
|
||||||
|
"id": {
|
||||||
|
"name": "id",
|
||||||
|
"type": "uuid",
|
||||||
|
"primaryKey": true,
|
||||||
|
"notNull": true,
|
||||||
|
"default": "gen_random_uuid()"
|
||||||
|
},
|
||||||
|
"name": {
|
||||||
|
"name": "name",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"description": {
|
||||||
|
"name": "description",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"context": {
|
||||||
|
"name": "context",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"repos": {
|
||||||
|
"name": "repos",
|
||||||
|
"type": "jsonb",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false,
|
||||||
|
"default": "'[]'::jsonb"
|
||||||
|
},
|
||||||
|
"links": {
|
||||||
|
"name": "links",
|
||||||
|
"type": "jsonb",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false,
|
||||||
|
"default": "'[]'::jsonb"
|
||||||
|
},
|
||||||
|
"created_at": {
|
||||||
|
"name": "created_at",
|
||||||
|
"type": "timestamp with time zone",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"default": "now()"
|
||||||
|
},
|
||||||
|
"updated_at": {
|
||||||
|
"name": "updated_at",
|
||||||
|
"type": "timestamp with time zone",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"default": "now()"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"indexes": {},
|
||||||
|
"foreignKeys": {},
|
||||||
|
"compositePrimaryKeys": {},
|
||||||
|
"uniqueConstraints": {},
|
||||||
|
"policies": {},
|
||||||
|
"checkConstraints": {},
|
||||||
|
"isRLSEnabled": false
|
||||||
|
},
|
||||||
|
"public.sessions": {
|
||||||
|
"name": "sessions",
|
||||||
|
"schema": "",
|
||||||
|
"columns": {
|
||||||
|
"id": {
|
||||||
|
"name": "id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": true,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"expires_at": {
|
||||||
|
"name": "expires_at",
|
||||||
|
"type": "timestamp with time zone",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"token": {
|
||||||
|
"name": "token",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"created_at": {
|
||||||
|
"name": "created_at",
|
||||||
|
"type": "timestamp with time zone",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"default": "now()"
|
||||||
|
},
|
||||||
|
"updated_at": {
|
||||||
|
"name": "updated_at",
|
||||||
|
"type": "timestamp with time zone",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"default": "now()"
|
||||||
|
},
|
||||||
|
"ip_address": {
|
||||||
|
"name": "ip_address",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"user_agent": {
|
||||||
|
"name": "user_agent",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"user_id": {
|
||||||
|
"name": "user_id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"indexes": {},
|
||||||
|
"foreignKeys": {
|
||||||
|
"sessions_user_id_users_id_fk": {
|
||||||
|
"name": "sessions_user_id_users_id_fk",
|
||||||
|
"tableFrom": "sessions",
|
||||||
|
"tableTo": "users",
|
||||||
|
"columnsFrom": [
|
||||||
|
"user_id"
|
||||||
|
],
|
||||||
|
"columnsTo": [
|
||||||
|
"id"
|
||||||
|
],
|
||||||
|
"onDelete": "no action",
|
||||||
|
"onUpdate": "no action"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"compositePrimaryKeys": {},
|
||||||
|
"uniqueConstraints": {
|
||||||
|
"sessions_token_unique": {
|
||||||
|
"name": "sessions_token_unique",
|
||||||
|
"nullsNotDistinct": false,
|
||||||
|
"columns": [
|
||||||
|
"token"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"policies": {},
|
||||||
|
"checkConstraints": {},
|
||||||
|
"isRLSEnabled": false
|
||||||
|
},
|
||||||
|
"public.tasks": {
|
||||||
|
"name": "tasks",
|
||||||
|
"schema": "",
|
||||||
|
"columns": {
|
||||||
|
"id": {
|
||||||
|
"name": "id",
|
||||||
|
"type": "uuid",
|
||||||
|
"primaryKey": true,
|
||||||
|
"notNull": true,
|
||||||
|
"default": "gen_random_uuid()"
|
||||||
|
},
|
||||||
|
"task_number": {
|
||||||
|
"name": "task_number",
|
||||||
|
"type": "integer",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"title": {
|
||||||
|
"name": "title",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"description": {
|
||||||
|
"name": "description",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"source": {
|
||||||
|
"name": "source",
|
||||||
|
"type": "task_source",
|
||||||
|
"typeSchema": "public",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"default": "'donovan'"
|
||||||
|
},
|
||||||
|
"status": {
|
||||||
|
"name": "status",
|
||||||
|
"type": "task_status",
|
||||||
|
"typeSchema": "public",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"default": "'queued'"
|
||||||
|
},
|
||||||
|
"priority": {
|
||||||
|
"name": "priority",
|
||||||
|
"type": "task_priority",
|
||||||
|
"typeSchema": "public",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"default": "'medium'"
|
||||||
|
},
|
||||||
|
"position": {
|
||||||
|
"name": "position",
|
||||||
|
"type": "integer",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"default": 0
|
||||||
|
},
|
||||||
|
"assignee_id": {
|
||||||
|
"name": "assignee_id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"assignee_name": {
|
||||||
|
"name": "assignee_name",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"project_id": {
|
||||||
|
"name": "project_id",
|
||||||
|
"type": "uuid",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"due_date": {
|
||||||
|
"name": "due_date",
|
||||||
|
"type": "timestamp with time zone",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"subtasks": {
|
||||||
|
"name": "subtasks",
|
||||||
|
"type": "jsonb",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false,
|
||||||
|
"default": "'[]'::jsonb"
|
||||||
|
},
|
||||||
|
"progress_notes": {
|
||||||
|
"name": "progress_notes",
|
||||||
|
"type": "jsonb",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false,
|
||||||
|
"default": "'[]'::jsonb"
|
||||||
|
},
|
||||||
|
"created_at": {
|
||||||
|
"name": "created_at",
|
||||||
|
"type": "timestamp with time zone",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"default": "now()"
|
||||||
|
},
|
||||||
|
"updated_at": {
|
||||||
|
"name": "updated_at",
|
||||||
|
"type": "timestamp with time zone",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"default": "now()"
|
||||||
|
},
|
||||||
|
"completed_at": {
|
||||||
|
"name": "completed_at",
|
||||||
|
"type": "timestamp with time zone",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"indexes": {},
|
||||||
|
"foreignKeys": {
|
||||||
|
"tasks_project_id_projects_id_fk": {
|
||||||
|
"name": "tasks_project_id_projects_id_fk",
|
||||||
|
"tableFrom": "tasks",
|
||||||
|
"tableTo": "projects",
|
||||||
|
"columnsFrom": [
|
||||||
|
"project_id"
|
||||||
|
],
|
||||||
|
"columnsTo": [
|
||||||
|
"id"
|
||||||
|
],
|
||||||
|
"onDelete": "set null",
|
||||||
|
"onUpdate": "no action"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"compositePrimaryKeys": {},
|
||||||
|
"uniqueConstraints": {},
|
||||||
|
"policies": {},
|
||||||
|
"checkConstraints": {},
|
||||||
|
"isRLSEnabled": false
|
||||||
|
},
|
||||||
|
"public.users": {
|
||||||
|
"name": "users",
|
||||||
|
"schema": "",
|
||||||
|
"columns": {
|
||||||
|
"id": {
|
||||||
|
"name": "id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": true,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"name": {
|
||||||
|
"name": "name",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"email": {
|
||||||
|
"name": "email",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"email_verified": {
|
||||||
|
"name": "email_verified",
|
||||||
|
"type": "boolean",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"default": false
|
||||||
|
},
|
||||||
|
"image": {
|
||||||
|
"name": "image",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false
|
||||||
|
},
|
||||||
|
"role": {
|
||||||
|
"name": "role",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"default": "'user'"
|
||||||
|
},
|
||||||
|
"created_at": {
|
||||||
|
"name": "created_at",
|
||||||
|
"type": "timestamp with time zone",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"default": "now()"
|
||||||
|
},
|
||||||
|
"updated_at": {
|
||||||
|
"name": "updated_at",
|
||||||
|
"type": "timestamp with time zone",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"default": "now()"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"indexes": {},
|
||||||
|
"foreignKeys": {},
|
||||||
|
"compositePrimaryKeys": {},
|
||||||
|
"uniqueConstraints": {
|
||||||
|
"users_email_unique": {
|
||||||
|
"name": "users_email_unique",
|
||||||
|
"nullsNotDistinct": false,
|
||||||
|
"columns": [
|
||||||
|
"email"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"policies": {},
|
||||||
|
"checkConstraints": {},
|
||||||
|
"isRLSEnabled": false
|
||||||
|
},
|
||||||
|
"public.verifications": {
|
||||||
|
"name": "verifications",
|
||||||
|
"schema": "",
|
||||||
|
"columns": {
|
||||||
|
"id": {
|
||||||
|
"name": "id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": true,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"identifier": {
|
||||||
|
"name": "identifier",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"value": {
|
||||||
|
"name": "value",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"expires_at": {
|
||||||
|
"name": "expires_at",
|
||||||
|
"type": "timestamp with time zone",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true
|
||||||
|
},
|
||||||
|
"created_at": {
|
||||||
|
"name": "created_at",
|
||||||
|
"type": "timestamp with time zone",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"default": "now()"
|
||||||
|
},
|
||||||
|
"updated_at": {
|
||||||
|
"name": "updated_at",
|
||||||
|
"type": "timestamp with time zone",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"default": "now()"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"indexes": {},
|
||||||
|
"foreignKeys": {},
|
||||||
|
"compositePrimaryKeys": {},
|
||||||
|
"uniqueConstraints": {},
|
||||||
|
"policies": {},
|
||||||
|
"checkConstraints": {},
|
||||||
|
"isRLSEnabled": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"enums": {
|
||||||
|
"public.task_priority": {
|
||||||
|
"name": "task_priority",
|
||||||
|
"schema": "public",
|
||||||
|
"values": [
|
||||||
|
"critical",
|
||||||
|
"high",
|
||||||
|
"medium",
|
||||||
|
"low"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"public.task_source": {
|
||||||
|
"name": "task_source",
|
||||||
|
"schema": "public",
|
||||||
|
"values": [
|
||||||
|
"donovan",
|
||||||
|
"david",
|
||||||
|
"hammer",
|
||||||
|
"heartbeat",
|
||||||
|
"cron",
|
||||||
|
"other"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"public.task_status": {
|
||||||
|
"name": "task_status",
|
||||||
|
"schema": "public",
|
||||||
|
"values": [
|
||||||
|
"active",
|
||||||
|
"queued",
|
||||||
|
"blocked",
|
||||||
|
"completed",
|
||||||
|
"cancelled"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"schemas": {},
|
||||||
|
"sequences": {},
|
||||||
|
"roles": {},
|
||||||
|
"policies": {},
|
||||||
|
"views": {},
|
||||||
|
"_meta": {
|
||||||
|
"columns": {},
|
||||||
|
"schemas": {},
|
||||||
|
"tables": {}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -8,6 +8,13 @@
|
|||||||
"when": 1769658956087,
|
"when": 1769658956087,
|
||||||
"tag": "0000_grey_starhawk",
|
"tag": "0000_grey_starhawk",
|
||||||
"breakpoints": true
|
"breakpoints": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"idx": 1,
|
||||||
|
"version": "7",
|
||||||
|
"when": 1769670192629,
|
||||||
|
"tag": "0001_mighty_callisto",
|
||||||
|
"breakpoints": true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -38,6 +38,14 @@ export interface ProgressNote {
|
|||||||
note: string;
|
note: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface Subtask {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
completed: boolean;
|
||||||
|
completedAt?: string;
|
||||||
|
createdAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
// ─── Projects ───
|
// ─── Projects ───
|
||||||
|
|
||||||
export interface ProjectLink {
|
export interface ProjectLink {
|
||||||
@@ -73,6 +81,8 @@ export const tasks = pgTable("tasks", {
|
|||||||
assigneeId: text("assignee_id"),
|
assigneeId: text("assignee_id"),
|
||||||
assigneeName: text("assignee_name"),
|
assigneeName: text("assignee_name"),
|
||||||
projectId: uuid("project_id").references(() => projects.id, { onDelete: "set null" }),
|
projectId: uuid("project_id").references(() => projects.id, { onDelete: "set null" }),
|
||||||
|
dueDate: timestamp("due_date", { withTimezone: true }),
|
||||||
|
subtasks: jsonb("subtasks").$type<Subtask[]>().default([]),
|
||||||
progressNotes: jsonb("progress_notes").$type<ProgressNote[]>().default([]),
|
progressNotes: jsonb("progress_notes").$type<ProgressNote[]>().default([]),
|
||||||
createdAt: timestamp("created_at", { withTimezone: true }).defaultNow().notNull(),
|
createdAt: timestamp("created_at", { withTimezone: true }).defaultNow().notNull(),
|
||||||
updatedAt: timestamp("updated_at", { withTimezone: true }).defaultNow().notNull(),
|
updatedAt: timestamp("updated_at", { withTimezone: true }).defaultNow().notNull(),
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { Elysia, t } from "elysia";
|
import { Elysia, t } from "elysia";
|
||||||
import { db } from "../db";
|
import { db } from "../db";
|
||||||
import { tasks, type ProgressNote } from "../db/schema";
|
import { tasks, type ProgressNote, type Subtask } from "../db/schema";
|
||||||
import { eq, asc, desc, sql, inArray, or } from "drizzle-orm";
|
import { eq, asc, desc, sql, inArray, or } from "drizzle-orm";
|
||||||
import { auth } from "../lib/auth";
|
import { auth } from "../lib/auth";
|
||||||
|
|
||||||
@@ -153,6 +153,8 @@ export const taskRoutes = new Elysia({ prefix: "/api/tasks" })
|
|||||||
position: (maxPos[0]?.max ?? 0) + 1,
|
position: (maxPos[0]?.max ?? 0) + 1,
|
||||||
taskNumber: nextNumber,
|
taskNumber: nextNumber,
|
||||||
projectId: body.projectId || null,
|
projectId: body.projectId || null,
|
||||||
|
dueDate: body.dueDate ? new Date(body.dueDate) : null,
|
||||||
|
subtasks: [],
|
||||||
progressNotes: [],
|
progressNotes: [],
|
||||||
})
|
})
|
||||||
.returning();
|
.returning();
|
||||||
@@ -190,6 +192,7 @@ export const taskRoutes = new Elysia({ prefix: "/api/tasks" })
|
|||||||
])
|
])
|
||||||
),
|
),
|
||||||
projectId: t.Optional(t.Union([t.String(), t.Null()])),
|
projectId: t.Optional(t.Union([t.String(), t.Null()])),
|
||||||
|
dueDate: t.Optional(t.Union([t.String(), t.Null()])),
|
||||||
}),
|
}),
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
@@ -236,6 +239,8 @@ export const taskRoutes = new Elysia({ prefix: "/api/tasks" })
|
|||||||
if (body.assigneeId !== undefined) updates.assigneeId = body.assigneeId;
|
if (body.assigneeId !== undefined) updates.assigneeId = body.assigneeId;
|
||||||
if (body.assigneeName !== undefined) updates.assigneeName = body.assigneeName;
|
if (body.assigneeName !== undefined) updates.assigneeName = body.assigneeName;
|
||||||
if (body.projectId !== undefined) updates.projectId = body.projectId;
|
if (body.projectId !== undefined) updates.projectId = body.projectId;
|
||||||
|
if (body.dueDate !== undefined) updates.dueDate = body.dueDate ? new Date(body.dueDate) : null;
|
||||||
|
if (body.subtasks !== undefined) updates.subtasks = body.subtasks;
|
||||||
|
|
||||||
const updated = await db
|
const updated = await db
|
||||||
.update(tasks)
|
.update(tasks)
|
||||||
@@ -263,10 +268,107 @@ export const taskRoutes = new Elysia({ prefix: "/api/tasks" })
|
|||||||
assigneeId: t.Optional(t.Union([t.String(), t.Null()])),
|
assigneeId: t.Optional(t.Union([t.String(), t.Null()])),
|
||||||
assigneeName: t.Optional(t.Union([t.String(), t.Null()])),
|
assigneeName: t.Optional(t.Union([t.String(), t.Null()])),
|
||||||
projectId: t.Optional(t.Union([t.String(), t.Null()])),
|
projectId: t.Optional(t.Union([t.String(), t.Null()])),
|
||||||
|
dueDate: t.Optional(t.Union([t.String(), t.Null()])),
|
||||||
|
subtasks: t.Optional(t.Array(t.Object({
|
||||||
|
id: t.String(),
|
||||||
|
title: t.String(),
|
||||||
|
completed: t.Boolean(),
|
||||||
|
completedAt: t.Optional(t.String()),
|
||||||
|
createdAt: t.String(),
|
||||||
|
}))),
|
||||||
}),
|
}),
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
|
// POST add subtask - requires auth
|
||||||
|
.post(
|
||||||
|
"/:id/subtasks",
|
||||||
|
async ({ params, body, request, headers }) => {
|
||||||
|
await requireSessionOrBearer(request, headers);
|
||||||
|
const task = await resolveTask(params.id);
|
||||||
|
if (!task) throw new Error("Task not found");
|
||||||
|
|
||||||
|
const currentSubtasks = (task.subtasks || []) as Subtask[];
|
||||||
|
const newSubtask: Subtask = {
|
||||||
|
id: `st-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
|
||||||
|
title: body.title,
|
||||||
|
completed: false,
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
currentSubtasks.push(newSubtask);
|
||||||
|
|
||||||
|
const updated = await db
|
||||||
|
.update(tasks)
|
||||||
|
.set({ subtasks: currentSubtasks, updatedAt: new Date() })
|
||||||
|
.where(eq(tasks.id, task.id))
|
||||||
|
.returning();
|
||||||
|
return updated[0];
|
||||||
|
},
|
||||||
|
{
|
||||||
|
params: t.Object({ id: t.String() }),
|
||||||
|
body: t.Object({ title: t.String() }),
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// PATCH toggle subtask - requires auth
|
||||||
|
.patch(
|
||||||
|
"/:id/subtasks/:subtaskId",
|
||||||
|
async ({ params, body, request, headers }) => {
|
||||||
|
await requireSessionOrBearer(request, headers);
|
||||||
|
const task = await resolveTask(params.id);
|
||||||
|
if (!task) throw new Error("Task not found");
|
||||||
|
|
||||||
|
const currentSubtasks = (task.subtasks || []) as Subtask[];
|
||||||
|
const subtask = currentSubtasks.find((s) => s.id === params.subtaskId);
|
||||||
|
if (!subtask) throw new Error("Task not found");
|
||||||
|
|
||||||
|
if (body.completed !== undefined) {
|
||||||
|
subtask.completed = body.completed;
|
||||||
|
subtask.completedAt = body.completed ? new Date().toISOString() : undefined;
|
||||||
|
}
|
||||||
|
if (body.title !== undefined) {
|
||||||
|
subtask.title = body.title;
|
||||||
|
}
|
||||||
|
|
||||||
|
const updated = await db
|
||||||
|
.update(tasks)
|
||||||
|
.set({ subtasks: currentSubtasks, updatedAt: new Date() })
|
||||||
|
.where(eq(tasks.id, task.id))
|
||||||
|
.returning();
|
||||||
|
return updated[0];
|
||||||
|
},
|
||||||
|
{
|
||||||
|
params: t.Object({ id: t.String(), subtaskId: t.String() }),
|
||||||
|
body: t.Object({
|
||||||
|
completed: t.Optional(t.Boolean()),
|
||||||
|
title: t.Optional(t.String()),
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// DELETE subtask - requires auth
|
||||||
|
.delete(
|
||||||
|
"/:id/subtasks/:subtaskId",
|
||||||
|
async ({ params, request, headers }) => {
|
||||||
|
await requireSessionOrBearer(request, headers);
|
||||||
|
const task = await resolveTask(params.id);
|
||||||
|
if (!task) throw new Error("Task not found");
|
||||||
|
|
||||||
|
const currentSubtasks = (task.subtasks || []) as Subtask[];
|
||||||
|
const filtered = currentSubtasks.filter((s) => s.id !== params.subtaskId);
|
||||||
|
|
||||||
|
const updated = await db
|
||||||
|
.update(tasks)
|
||||||
|
.set({ subtasks: filtered, updatedAt: new Date() })
|
||||||
|
.where(eq(tasks.id, task.id))
|
||||||
|
.returning();
|
||||||
|
return updated[0];
|
||||||
|
},
|
||||||
|
{
|
||||||
|
params: t.Object({ id: t.String(), subtaskId: t.String() }),
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
// POST add progress note - requires auth
|
// POST add progress note - requires auth
|
||||||
.post(
|
.post(
|
||||||
"/:id/notes",
|
"/:id/notes",
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import { DashboardPage } from "./pages/DashboardPage";
|
|||||||
import { QueuePage } from "./pages/QueuePage";
|
import { QueuePage } from "./pages/QueuePage";
|
||||||
import { ChatPage } from "./pages/ChatPage";
|
import { ChatPage } from "./pages/ChatPage";
|
||||||
import { ProjectsPage } from "./pages/ProjectsPage";
|
import { ProjectsPage } from "./pages/ProjectsPage";
|
||||||
|
import { TaskPage } from "./pages/TaskPage";
|
||||||
import { AdminPage } from "./components/AdminPage";
|
import { AdminPage } from "./components/AdminPage";
|
||||||
import { LoginPage } from "./components/LoginPage";
|
import { LoginPage } from "./components/LoginPage";
|
||||||
import { useSession } from "./lib/auth-client";
|
import { useSession } from "./lib/auth-client";
|
||||||
@@ -15,6 +16,7 @@ function AuthenticatedApp() {
|
|||||||
<Route element={<DashboardLayout />}>
|
<Route element={<DashboardLayout />}>
|
||||||
<Route path="/" element={<DashboardPage />} />
|
<Route path="/" element={<DashboardPage />} />
|
||||||
<Route path="/queue" element={<QueuePage />} />
|
<Route path="/queue" element={<QueuePage />} />
|
||||||
|
<Route path="/task/:taskRef" element={<TaskPage />} />
|
||||||
<Route path="/projects" element={<ProjectsPage />} />
|
<Route path="/projects" element={<ProjectsPage />} />
|
||||||
<Route path="/chat" element={<ChatPage />} />
|
<Route path="/chat" element={<ChatPage />} />
|
||||||
<Route path="/admin" element={<AdminPage />} />
|
<Route path="/admin" element={<AdminPage />} />
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { useState, useEffect, useRef } from "react";
|
import { useState, useEffect, useRef } from "react";
|
||||||
import type { Task, TaskStatus, TaskPriority, TaskSource, Project } from "../lib/types";
|
import type { Task, TaskStatus, TaskPriority, TaskSource, Project } from "../lib/types";
|
||||||
import { updateTask, fetchProjects, addProgressNote } from "../lib/api";
|
import { updateTask, fetchProjects, addProgressNote, addSubtask, toggleSubtask, deleteSubtask } from "../lib/api";
|
||||||
|
|
||||||
const priorityColors: Record<TaskPriority, string> = {
|
const priorityColors: Record<TaskPriority, string> = {
|
||||||
critical: "bg-red-500 text-white",
|
critical: "bg-red-500 text-white",
|
||||||
@@ -253,7 +253,10 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
|
|||||||
const [draftPriority, setDraftPriority] = useState(task.priority);
|
const [draftPriority, setDraftPriority] = useState(task.priority);
|
||||||
const [draftSource, setDraftSource] = useState(task.source);
|
const [draftSource, setDraftSource] = useState(task.source);
|
||||||
const [draftProjectId, setDraftProjectId] = useState(task.projectId || "");
|
const [draftProjectId, setDraftProjectId] = useState(task.projectId || "");
|
||||||
|
const [draftDueDate, setDraftDueDate] = useState(task.dueDate ? new Date(task.dueDate).toISOString().slice(0, 16) : "");
|
||||||
const [projects, setProjects] = useState<Project[]>([]);
|
const [projects, setProjects] = useState<Project[]>([]);
|
||||||
|
const [newSubtaskTitle, setNewSubtaskTitle] = useState("");
|
||||||
|
const [addingSubtask, setAddingSubtask] = useState(false);
|
||||||
|
|
||||||
// Fetch projects for the selector
|
// Fetch projects for the selector
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -267,15 +270,18 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
|
|||||||
setDraftPriority(task.priority);
|
setDraftPriority(task.priority);
|
||||||
setDraftSource(task.source);
|
setDraftSource(task.source);
|
||||||
setDraftProjectId(task.projectId || "");
|
setDraftProjectId(task.projectId || "");
|
||||||
}, [task.id, task.title, task.description, task.priority, task.source, task.projectId]);
|
setDraftDueDate(task.dueDate ? new Date(task.dueDate).toISOString().slice(0, 16) : "");
|
||||||
|
}, [task.id, task.title, task.description, task.priority, task.source, task.projectId, task.dueDate]);
|
||||||
|
|
||||||
// Detect if any field has been modified
|
// Detect if any field has been modified
|
||||||
|
const currentDueDate = task.dueDate ? new Date(task.dueDate).toISOString().slice(0, 16) : "";
|
||||||
const isDirty =
|
const isDirty =
|
||||||
draftTitle !== task.title ||
|
draftTitle !== task.title ||
|
||||||
draftDescription !== (task.description || "") ||
|
draftDescription !== (task.description || "") ||
|
||||||
draftPriority !== task.priority ||
|
draftPriority !== task.priority ||
|
||||||
draftSource !== task.source ||
|
draftSource !== task.source ||
|
||||||
draftProjectId !== (task.projectId || "");
|
draftProjectId !== (task.projectId || "") ||
|
||||||
|
draftDueDate !== currentDueDate;
|
||||||
|
|
||||||
const handleCancel = () => {
|
const handleCancel = () => {
|
||||||
setDraftTitle(task.title);
|
setDraftTitle(task.title);
|
||||||
@@ -283,6 +289,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
|
|||||||
setDraftPriority(task.priority);
|
setDraftPriority(task.priority);
|
||||||
setDraftSource(task.source);
|
setDraftSource(task.source);
|
||||||
setDraftProjectId(task.projectId || "");
|
setDraftProjectId(task.projectId || "");
|
||||||
|
setDraftDueDate(task.dueDate ? new Date(task.dueDate).toISOString().slice(0, 16) : "");
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSave = async () => {
|
const handleSave = async () => {
|
||||||
@@ -295,6 +302,7 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
|
|||||||
if (draftPriority !== task.priority) updates.priority = draftPriority;
|
if (draftPriority !== task.priority) updates.priority = draftPriority;
|
||||||
if (draftSource !== task.source) updates.source = draftSource;
|
if (draftSource !== task.source) updates.source = draftSource;
|
||||||
if (draftProjectId !== (task.projectId || "")) updates.projectId = draftProjectId || null;
|
if (draftProjectId !== (task.projectId || "")) updates.projectId = draftProjectId || null;
|
||||||
|
if (draftDueDate !== currentDueDate) updates.dueDate = draftDueDate ? new Date(draftDueDate).toISOString() : null;
|
||||||
await updateTask(task.id, updates, token);
|
await updateTask(task.id, updates, token);
|
||||||
onTaskUpdated();
|
onTaskUpdated();
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
@@ -462,6 +470,49 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Due Date */}
|
||||||
|
<div className="px-4 sm:px-6 py-4 border-b border-gray-100">
|
||||||
|
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Due Date</h3>
|
||||||
|
{hasToken ? (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<input
|
||||||
|
type="datetime-local"
|
||||||
|
value={draftDueDate}
|
||||||
|
onChange={(e) => setDraftDueDate(e.target.value)}
|
||||||
|
className="text-sm border border-gray-200 rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-amber-200 bg-white"
|
||||||
|
/>
|
||||||
|
{draftDueDate && (
|
||||||
|
<button
|
||||||
|
onClick={() => setDraftDueDate("")}
|
||||||
|
className="text-xs text-gray-400 hover:text-red-500 transition"
|
||||||
|
title="Clear due date"
|
||||||
|
>
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{task.dueDate && (() => {
|
||||||
|
const due = new Date(task.dueDate);
|
||||||
|
const now = new Date();
|
||||||
|
const diffMs = due.getTime() - now.getTime();
|
||||||
|
const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));
|
||||||
|
const isOverdue = diffMs < 0;
|
||||||
|
const isDueSoon = diffDays <= 2 && !isOverdue;
|
||||||
|
return (
|
||||||
|
<span className={`text-xs font-medium px-2 py-0.5 rounded-full ${
|
||||||
|
isOverdue ? "bg-red-100 text-red-700" : isDueSoon ? "bg-amber-100 text-amber-700" : "bg-gray-100 text-gray-600"
|
||||||
|
}`}>
|
||||||
|
{isOverdue ? `${Math.abs(diffDays)}d overdue` : diffDays === 0 ? "Due today" : diffDays === 1 ? "Due tomorrow" : `${diffDays}d left`}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<span className="text-sm text-gray-700">
|
||||||
|
{task.dueDate ? new Date(task.dueDate).toLocaleString(undefined, { month: "short", day: "numeric", year: "numeric", hour: "2-digit", minute: "2-digit" }) : <span className="text-gray-400 italic">No due date</span>}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Description */}
|
{/* Description */}
|
||||||
<div className="px-4 sm:px-6 py-4 border-b border-gray-100">
|
<div className="px-4 sm:px-6 py-4 border-b border-gray-100">
|
||||||
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Description</h3>
|
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Description</h3>
|
||||||
@@ -509,6 +560,128 @@ export function TaskDetailPanel({ task, onClose, onStatusChange, onTaskUpdated,
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Subtasks */}
|
||||||
|
<div className="px-4 sm:px-6 py-4 border-b border-gray-100">
|
||||||
|
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">
|
||||||
|
Subtasks {task.subtasks?.length > 0 && (
|
||||||
|
<span className="text-gray-300 ml-1">
|
||||||
|
({task.subtasks.filter(s => s.completed).length}/{task.subtasks.length})
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
{/* Subtask progress bar */}
|
||||||
|
{task.subtasks?.length > 0 && (
|
||||||
|
<div className="mb-3">
|
||||||
|
<div className="w-full bg-gray-200 rounded-full h-1.5">
|
||||||
|
<div
|
||||||
|
className="bg-green-500 h-1.5 rounded-full transition-all duration-300"
|
||||||
|
style={{ width: `${(task.subtasks.filter(s => s.completed).length / task.subtasks.length) * 100}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Subtask list */}
|
||||||
|
{task.subtasks?.length > 0 && (
|
||||||
|
<div className="space-y-1 mb-3">
|
||||||
|
{task.subtasks.map((subtask) => (
|
||||||
|
<div key={subtask.id} className="flex items-center gap-2 group py-1">
|
||||||
|
<button
|
||||||
|
onClick={async () => {
|
||||||
|
try {
|
||||||
|
await toggleSubtask(task.id, subtask.id, !subtask.completed);
|
||||||
|
onTaskUpdated();
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Failed to toggle subtask:", e);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className={`w-5 h-5 rounded border-2 flex items-center justify-center shrink-0 transition ${
|
||||||
|
subtask.completed
|
||||||
|
? "bg-green-500 border-green-500 text-white"
|
||||||
|
: "border-gray-300 hover:border-amber-400"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{subtask.completed && (
|
||||||
|
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
<span className={`text-sm flex-1 ${subtask.completed ? "line-through text-gray-400" : "text-gray-700"}`}>
|
||||||
|
{subtask.title}
|
||||||
|
</span>
|
||||||
|
{hasToken && (
|
||||||
|
<button
|
||||||
|
onClick={async () => {
|
||||||
|
try {
|
||||||
|
await deleteSubtask(task.id, subtask.id);
|
||||||
|
onTaskUpdated();
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Failed to delete subtask:", e);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="opacity-0 group-hover:opacity-100 text-gray-300 hover:text-red-400 transition p-0.5"
|
||||||
|
title="Remove subtask"
|
||||||
|
>
|
||||||
|
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Add subtask input */}
|
||||||
|
{hasToken && (
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={newSubtaskTitle}
|
||||||
|
onChange={(e) => setNewSubtaskTitle(e.target.value)}
|
||||||
|
placeholder="Add a subtask..."
|
||||||
|
className="flex-1 text-sm border border-gray-200 rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-amber-200 focus:border-amber-300"
|
||||||
|
onKeyDown={async (e) => {
|
||||||
|
if (e.key === "Enter" && newSubtaskTitle.trim()) {
|
||||||
|
setAddingSubtask(true);
|
||||||
|
try {
|
||||||
|
await addSubtask(task.id, newSubtaskTitle.trim());
|
||||||
|
setNewSubtaskTitle("");
|
||||||
|
onTaskUpdated();
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Failed to add subtask:", err);
|
||||||
|
} finally {
|
||||||
|
setAddingSubtask(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
disabled={addingSubtask}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={async () => {
|
||||||
|
if (!newSubtaskTitle.trim()) return;
|
||||||
|
setAddingSubtask(true);
|
||||||
|
try {
|
||||||
|
await addSubtask(task.id, newSubtaskTitle.trim());
|
||||||
|
setNewSubtaskTitle("");
|
||||||
|
onTaskUpdated();
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Failed to add subtask:", err);
|
||||||
|
} finally {
|
||||||
|
setAddingSubtask(false);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
disabled={!newSubtaskTitle.trim() || addingSubtask}
|
||||||
|
className="px-3 py-1.5 bg-amber-500 text-white text-sm rounded-lg font-medium hover:bg-amber-600 transition disabled:opacity-50 disabled:cursor-not-allowed shrink-0"
|
||||||
|
>
|
||||||
|
{addingSubtask ? "..." : "+"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Progress Notes */}
|
{/* Progress Notes */}
|
||||||
<div className="px-4 sm:px-6 py-4">
|
<div className="px-4 sm:px-6 py-4">
|
||||||
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">
|
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">
|
||||||
|
|||||||
@@ -115,6 +115,38 @@ export async function deleteProject(id: string): Promise<void> {
|
|||||||
if (!res.ok) throw new Error("Failed to delete project");
|
if (!res.ok) throw new Error("Failed to delete project");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Subtasks
|
||||||
|
export async function addSubtask(taskId: string, title: string): Promise<Task> {
|
||||||
|
const res = await fetch(`${BASE}/${taskId}/subtasks`, {
|
||||||
|
method: "POST",
|
||||||
|
credentials: "include",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ title }),
|
||||||
|
});
|
||||||
|
if (!res.ok) throw new Error("Failed to add subtask");
|
||||||
|
return res.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function toggleSubtask(taskId: string, subtaskId: string, completed: boolean): Promise<Task> {
|
||||||
|
const res = await fetch(`${BASE}/${taskId}/subtasks/${subtaskId}`, {
|
||||||
|
method: "PATCH",
|
||||||
|
credentials: "include",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ completed }),
|
||||||
|
});
|
||||||
|
if (!res.ok) throw new Error("Failed to toggle subtask");
|
||||||
|
return res.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function deleteSubtask(taskId: string, subtaskId: string): Promise<Task> {
|
||||||
|
const res = await fetch(`${BASE}/${taskId}/subtasks/${subtaskId}`, {
|
||||||
|
method: "DELETE",
|
||||||
|
credentials: "include",
|
||||||
|
});
|
||||||
|
if (!res.ok) throw new Error("Failed to delete subtask");
|
||||||
|
return res.json();
|
||||||
|
}
|
||||||
|
|
||||||
// Progress Notes
|
// Progress Notes
|
||||||
export async function addProgressNote(taskId: string, note: string): Promise<Task> {
|
export async function addProgressNote(taskId: string, note: string): Promise<Task> {
|
||||||
const res = await fetch(`${BASE}/${taskId}/notes`, {
|
const res = await fetch(`${BASE}/${taskId}/notes`, {
|
||||||
|
|||||||
@@ -7,6 +7,14 @@ export interface ProgressNote {
|
|||||||
note: string;
|
note: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface Subtask {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
completed: boolean;
|
||||||
|
completedAt?: string;
|
||||||
|
createdAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
export interface ProjectLink {
|
export interface ProjectLink {
|
||||||
label: string;
|
label: string;
|
||||||
url: string;
|
url: string;
|
||||||
@@ -36,7 +44,11 @@ export interface Task {
|
|||||||
status: TaskStatus;
|
status: TaskStatus;
|
||||||
priority: TaskPriority;
|
priority: TaskPriority;
|
||||||
position: number;
|
position: number;
|
||||||
|
assigneeId: string | null;
|
||||||
|
assigneeName: string | null;
|
||||||
projectId: string | null;
|
projectId: string | null;
|
||||||
|
dueDate: string | null;
|
||||||
|
subtasks: Subtask[];
|
||||||
progressNotes: ProgressNote[];
|
progressNotes: ProgressNote[];
|
||||||
createdAt: string;
|
createdAt: string;
|
||||||
updatedAt: string;
|
updatedAt: string;
|
||||||
|
|||||||
@@ -137,7 +137,7 @@ export function DashboardPage() {
|
|||||||
) : (
|
) : (
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
{activeTasks.map((task) => (
|
{activeTasks.map((task) => (
|
||||||
<Link to="/queue" key={task.id} className="block">
|
<Link to={`/task/HQ-${task.taskNumber}`} key={task.id} className="block">
|
||||||
<div className="rounded-lg border border-amber-200 bg-amber-50 p-3 hover:bg-amber-100 transition">
|
<div className="rounded-lg border border-amber-200 bg-amber-50 p-3 hover:bg-amber-100 transition">
|
||||||
<div className="flex items-center gap-2 mb-1">
|
<div className="flex items-center gap-2 mb-1">
|
||||||
<span className="relative flex h-2 w-2">
|
<span className="relative flex h-2 w-2">
|
||||||
@@ -146,8 +146,27 @@ export function DashboardPage() {
|
|||||||
</span>
|
</span>
|
||||||
<span className="text-xs font-bold text-amber-700 font-mono">HQ-{task.taskNumber}</span>
|
<span className="text-xs font-bold text-amber-700 font-mono">HQ-{task.taskNumber}</span>
|
||||||
<span className="text-xs text-amber-600 capitalize px-1.5 py-0.5 bg-amber-200/50 rounded-full">{task.priority}</span>
|
<span className="text-xs text-amber-600 capitalize px-1.5 py-0.5 bg-amber-200/50 rounded-full">{task.priority}</span>
|
||||||
|
{task.dueDate && (() => {
|
||||||
|
const due = new Date(task.dueDate);
|
||||||
|
const diffMs = due.getTime() - Date.now();
|
||||||
|
const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));
|
||||||
|
const isOverdue = diffMs < 0;
|
||||||
|
return isOverdue || diffDays <= 2 ? (
|
||||||
|
<span className={`text-xs px-1.5 py-0.5 rounded-full ${isOverdue ? "bg-red-200 text-red-700" : "bg-amber-200 text-amber-700"}`}>
|
||||||
|
📅 {isOverdue ? "overdue" : diffDays === 0 ? "today" : diffDays === 1 ? "tomorrow" : `${diffDays}d`}
|
||||||
|
</span>
|
||||||
|
) : null;
|
||||||
|
})()}
|
||||||
</div>
|
</div>
|
||||||
<h3 className="font-medium text-sm text-amber-900">{task.title}</h3>
|
<h3 className="font-medium text-sm text-amber-900">{task.title}</h3>
|
||||||
|
{task.subtasks?.length > 0 && (
|
||||||
|
<div className="mt-1.5 flex items-center gap-2">
|
||||||
|
<div className="flex-1 bg-amber-200/50 rounded-full h-1">
|
||||||
|
<div className="bg-green-500 h-1 rounded-full" style={{ width: `${(task.subtasks.filter(s => s.completed).length / task.subtasks.length) * 100}%` }} />
|
||||||
|
</div>
|
||||||
|
<span className="text-xs text-amber-600">{task.subtasks.filter(s => s.completed).length}/{task.subtasks.length}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
{task.progressNotes?.length > 0 && (
|
{task.progressNotes?.length > 0 && (
|
||||||
<p className="text-xs text-amber-700 mt-1 line-clamp-2 opacity-70">
|
<p className="text-xs text-amber-700 mt-1 line-clamp-2 opacity-70">
|
||||||
Latest: {task.progressNotes[task.progressNotes.length - 1].note}
|
Latest: {task.progressNotes[task.progressNotes.length - 1].note}
|
||||||
|
|||||||
493
frontend/src/pages/TaskPage.tsx
Normal file
493
frontend/src/pages/TaskPage.tsx
Normal file
@@ -0,0 +1,493 @@
|
|||||||
|
import { useState, useEffect, useCallback } from "react";
|
||||||
|
import { useParams, Link } from "react-router-dom";
|
||||||
|
import type { Task, TaskStatus, Project } from "../lib/types";
|
||||||
|
import { updateTask, fetchProjects, addProgressNote, addSubtask, toggleSubtask, deleteSubtask } from "../lib/api";
|
||||||
|
|
||||||
|
const priorityColors: Record<string, string> = {
|
||||||
|
critical: "bg-red-500 text-white",
|
||||||
|
high: "bg-orange-500 text-white",
|
||||||
|
medium: "bg-blue-500 text-white",
|
||||||
|
low: "bg-gray-400 text-white",
|
||||||
|
};
|
||||||
|
|
||||||
|
const statusColors: Record<string, string> = {
|
||||||
|
active: "bg-amber-100 text-amber-800 border-amber-300",
|
||||||
|
queued: "bg-blue-100 text-blue-800 border-blue-300",
|
||||||
|
blocked: "bg-red-100 text-red-800 border-red-300",
|
||||||
|
completed: "bg-green-100 text-green-800 border-green-300",
|
||||||
|
cancelled: "bg-gray-100 text-gray-600 border-gray-300",
|
||||||
|
};
|
||||||
|
|
||||||
|
const statusIcons: Record<string, string> = {
|
||||||
|
active: "⚡",
|
||||||
|
queued: "📋",
|
||||||
|
blocked: "🚫",
|
||||||
|
completed: "✅",
|
||||||
|
cancelled: "❌",
|
||||||
|
};
|
||||||
|
|
||||||
|
const statusActions: Record<string, { label: string; next: TaskStatus; color: string }[]> = {
|
||||||
|
active: [
|
||||||
|
{ label: "⏸ Pause", next: "queued", color: "bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100" },
|
||||||
|
{ label: "🚫 Block", next: "blocked", color: "bg-red-50 text-red-700 border-red-200 hover:bg-red-100" },
|
||||||
|
{ label: "✅ Complete", next: "completed", color: "bg-green-50 text-green-700 border-green-200 hover:bg-green-100" },
|
||||||
|
],
|
||||||
|
queued: [
|
||||||
|
{ label: "▶ Activate", next: "active", color: "bg-amber-50 text-amber-700 border-amber-200 hover:bg-amber-100" },
|
||||||
|
{ label: "🚫 Block", next: "blocked", color: "bg-red-50 text-red-700 border-red-200 hover:bg-red-100" },
|
||||||
|
],
|
||||||
|
blocked: [
|
||||||
|
{ label: "▶ Activate", next: "active", color: "bg-amber-50 text-amber-700 border-amber-200 hover:bg-amber-100" },
|
||||||
|
{ label: "📋 Queue", next: "queued", color: "bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100" },
|
||||||
|
],
|
||||||
|
completed: [{ label: "🔄 Requeue", next: "queued", color: "bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100" }],
|
||||||
|
cancelled: [{ label: "🔄 Requeue", next: "queued", color: "bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100" }],
|
||||||
|
};
|
||||||
|
|
||||||
|
function formatDate(dateStr: string): string {
|
||||||
|
return new Date(dateStr).toLocaleString(undefined, {
|
||||||
|
month: "short", day: "numeric", year: "numeric",
|
||||||
|
hour: "2-digit", minute: "2-digit",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function timeAgo(dateStr: string): string {
|
||||||
|
const seconds = Math.floor((Date.now() - new Date(dateStr).getTime()) / 1000);
|
||||||
|
if (seconds < 60) return "just now";
|
||||||
|
const minutes = Math.floor(seconds / 60);
|
||||||
|
if (minutes < 60) return `${minutes}m ago`;
|
||||||
|
const hours = Math.floor(minutes / 60);
|
||||||
|
if (hours < 24) return `${hours}h ago`;
|
||||||
|
const days = Math.floor(hours / 24);
|
||||||
|
return `${days}d ago`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TaskPage() {
|
||||||
|
const { taskRef } = useParams<{ taskRef: string }>();
|
||||||
|
const [task, setTask] = useState<Task | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [projects, setProjects] = useState<Project[]>([]);
|
||||||
|
const [noteText, setNoteText] = useState("");
|
||||||
|
const [addingNote, setAddingNote] = useState(false);
|
||||||
|
const [newSubtaskTitle, setNewSubtaskTitle] = useState("");
|
||||||
|
const [addingSubtask, setAddingSubtask] = useState(false);
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
|
||||||
|
const fetchTask = useCallback(async () => {
|
||||||
|
if (!taskRef) return;
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/tasks/${taskRef}`, { credentials: "include" });
|
||||||
|
if (!res.ok) throw new Error(res.status === 404 ? "Task not found" : "Failed to load task");
|
||||||
|
const data = await res.json();
|
||||||
|
setTask(data);
|
||||||
|
setError(null);
|
||||||
|
} catch (e: any) {
|
||||||
|
setError(e.message);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, [taskRef]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchTask();
|
||||||
|
fetchProjects().then(setProjects).catch(() => {});
|
||||||
|
}, [fetchTask]);
|
||||||
|
|
||||||
|
// Auto-refresh every 15s
|
||||||
|
useEffect(() => {
|
||||||
|
const interval = setInterval(fetchTask, 15000);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, [fetchTask]);
|
||||||
|
|
||||||
|
const handleStatusChange = async (status: TaskStatus) => {
|
||||||
|
if (!task) return;
|
||||||
|
setSaving(true);
|
||||||
|
try {
|
||||||
|
await updateTask(task.id, { status });
|
||||||
|
fetchTask();
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Failed to update status:", e);
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center text-gray-400">
|
||||||
|
Loading task...
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error || !task) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<span className="text-4xl block mb-3">😕</span>
|
||||||
|
<p className="text-gray-500 mb-4">{error || "Task not found"}</p>
|
||||||
|
<Link to="/queue" className="text-amber-600 hover:text-amber-700 font-medium text-sm">
|
||||||
|
← Back to Queue
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const isActive = task.status === "active";
|
||||||
|
const actions = statusActions[task.status] || [];
|
||||||
|
const project = projects.find((p) => p.id === task.projectId);
|
||||||
|
const subtaskProgress = task.subtasks?.length > 0
|
||||||
|
? Math.round((task.subtasks.filter(s => s.completed).length / task.subtasks.length) * 100)
|
||||||
|
: 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen">
|
||||||
|
{/* Header */}
|
||||||
|
<header className={`sticky top-14 md:top-0 z-30 border-b ${isActive ? "bg-gradient-to-r from-amber-50 to-orange-50 border-amber-200" : "bg-white border-gray-200"}`}>
|
||||||
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 py-4">
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<Link to="/queue" className="text-sm text-gray-400 hover:text-gray-600 transition">
|
||||||
|
← Queue
|
||||||
|
</Link>
|
||||||
|
<span className="text-gray-300">/</span>
|
||||||
|
<span className="text-xs font-bold text-amber-700 bg-amber-100 px-2 py-0.5 rounded font-mono">
|
||||||
|
HQ-{task.taskNumber}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start justify-between gap-4">
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||||
|
{isActive && (
|
||||||
|
<span className="relative flex h-3 w-3">
|
||||||
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
|
||||||
|
<span className="relative inline-flex rounded-full h-3 w-3 bg-amber-500"></span>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span className={`text-xs px-2.5 py-1 rounded-full font-semibold border ${statusColors[task.status]}`}>
|
||||||
|
{statusIcons[task.status]} {task.status.toUpperCase()}
|
||||||
|
</span>
|
||||||
|
<span className={`text-xs px-2 py-0.5 rounded-full font-medium ${priorityColors[task.priority]}`}>
|
||||||
|
{task.priority}
|
||||||
|
</span>
|
||||||
|
{project && (
|
||||||
|
<span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded">
|
||||||
|
📁 {project.name}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<h1 className="text-xl font-bold text-gray-900">{task.title}</h1>
|
||||||
|
</div>
|
||||||
|
{/* Status Actions */}
|
||||||
|
<div className="flex gap-2 shrink-0">
|
||||||
|
{actions.map((action) => (
|
||||||
|
<button
|
||||||
|
key={action.next}
|
||||||
|
onClick={() => handleStatusChange(action.next)}
|
||||||
|
disabled={saving}
|
||||||
|
className={`text-sm px-3 py-1.5 rounded-lg border font-medium transition ${action.color} disabled:opacity-50`}
|
||||||
|
>
|
||||||
|
{action.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Due date badge */}
|
||||||
|
{task.dueDate && (() => {
|
||||||
|
const due = new Date(task.dueDate);
|
||||||
|
const now = new Date();
|
||||||
|
const diffMs = due.getTime() - now.getTime();
|
||||||
|
const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));
|
||||||
|
const isOverdue = diffMs < 0;
|
||||||
|
const isDueSoon = diffDays <= 2 && !isOverdue;
|
||||||
|
return (
|
||||||
|
<div className="mt-2 flex items-center gap-2">
|
||||||
|
<span className="text-xs text-gray-500">📅 Due:</span>
|
||||||
|
<span className={`text-xs font-medium px-2 py-0.5 rounded-full ${
|
||||||
|
isOverdue ? "bg-red-100 text-red-700" : isDueSoon ? "bg-amber-100 text-amber-700" : "bg-gray-100 text-gray-600"
|
||||||
|
}`}>
|
||||||
|
{formatDate(task.dueDate)} ({isOverdue ? `${Math.abs(diffDays)}d overdue` : diffDays === 0 ? "today" : diffDays === 1 ? "tomorrow" : `${diffDays}d left`})
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 py-6">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
|
{/* Main content */}
|
||||||
|
<div className="lg:col-span-2 space-y-6">
|
||||||
|
{/* Description */}
|
||||||
|
<div className="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
|
||||||
|
<h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">Description</h2>
|
||||||
|
<p className="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap">
|
||||||
|
{task.description || <span className="text-gray-400 italic">No description</span>}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Subtasks */}
|
||||||
|
<div className="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
|
||||||
|
<div className="flex items-center justify-between mb-3">
|
||||||
|
<h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider">
|
||||||
|
Subtasks {task.subtasks?.length > 0 && (
|
||||||
|
<span className="text-gray-300 ml-1">({task.subtasks.filter(s => s.completed).length}/{task.subtasks.length})</span>
|
||||||
|
)}
|
||||||
|
</h2>
|
||||||
|
{task.subtasks?.length > 0 && (
|
||||||
|
<span className="text-xs text-gray-400">{subtaskProgress}%</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Progress bar */}
|
||||||
|
{task.subtasks?.length > 0 && (
|
||||||
|
<div className="mb-4">
|
||||||
|
<div className="w-full bg-gray-200 rounded-full h-2">
|
||||||
|
<div
|
||||||
|
className="bg-green-500 h-2 rounded-full transition-all duration-300"
|
||||||
|
style={{ width: `${subtaskProgress}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Subtask items */}
|
||||||
|
{task.subtasks?.length > 0 && (
|
||||||
|
<div className="space-y-1 mb-4">
|
||||||
|
{task.subtasks.map((subtask) => (
|
||||||
|
<div key={subtask.id} className="flex items-center gap-3 group py-1.5 px-2 rounded-lg hover:bg-gray-50 transition">
|
||||||
|
<button
|
||||||
|
onClick={async () => {
|
||||||
|
try {
|
||||||
|
await toggleSubtask(task.id, subtask.id, !subtask.completed);
|
||||||
|
fetchTask();
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Failed to toggle subtask:", e);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className={`w-5 h-5 rounded border-2 flex items-center justify-center shrink-0 transition ${
|
||||||
|
subtask.completed
|
||||||
|
? "bg-green-500 border-green-500 text-white"
|
||||||
|
: "border-gray-300 hover:border-amber-400"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{subtask.completed && (
|
||||||
|
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
<span className={`text-sm flex-1 ${subtask.completed ? "line-through text-gray-400" : "text-gray-700"}`}>
|
||||||
|
{subtask.title}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={async () => {
|
||||||
|
try {
|
||||||
|
await deleteSubtask(task.id, subtask.id);
|
||||||
|
fetchTask();
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Failed to delete subtask:", e);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="opacity-0 group-hover:opacity-100 text-gray-300 hover:text-red-400 transition p-0.5"
|
||||||
|
>
|
||||||
|
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Add subtask */}
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={newSubtaskTitle}
|
||||||
|
onChange={(e) => setNewSubtaskTitle(e.target.value)}
|
||||||
|
placeholder="Add a subtask..."
|
||||||
|
className="flex-1 text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-200 focus:border-amber-300"
|
||||||
|
onKeyDown={async (e) => {
|
||||||
|
if (e.key === "Enter" && newSubtaskTitle.trim()) {
|
||||||
|
setAddingSubtask(true);
|
||||||
|
try {
|
||||||
|
await addSubtask(task.id, newSubtaskTitle.trim());
|
||||||
|
setNewSubtaskTitle("");
|
||||||
|
fetchTask();
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Failed to add subtask:", err);
|
||||||
|
} finally {
|
||||||
|
setAddingSubtask(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
disabled={addingSubtask}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={async () => {
|
||||||
|
if (!newSubtaskTitle.trim()) return;
|
||||||
|
setAddingSubtask(true);
|
||||||
|
try {
|
||||||
|
await addSubtask(task.id, newSubtaskTitle.trim());
|
||||||
|
setNewSubtaskTitle("");
|
||||||
|
fetchTask();
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Failed to add subtask:", err);
|
||||||
|
} finally {
|
||||||
|
setAddingSubtask(false);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
disabled={!newSubtaskTitle.trim() || addingSubtask}
|
||||||
|
className="px-4 py-2 bg-amber-500 text-white text-sm rounded-lg font-medium hover:bg-amber-600 transition disabled:opacity-50 disabled:cursor-not-allowed shrink-0"
|
||||||
|
>
|
||||||
|
{addingSubtask ? "..." : "+ Add"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Progress Notes */}
|
||||||
|
<div className="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
|
||||||
|
<h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">
|
||||||
|
Progress Notes {task.progressNotes?.length > 0 && (
|
||||||
|
<span className="text-gray-300 ml-1">({task.progressNotes.length})</span>
|
||||||
|
)}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Add note */}
|
||||||
|
<div className="mb-4">
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<textarea
|
||||||
|
value={noteText}
|
||||||
|
onChange={(e) => setNoteText(e.target.value)}
|
||||||
|
placeholder="Add a progress note..."
|
||||||
|
rows={2}
|
||||||
|
className="flex-1 text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-200 focus:border-amber-300 resize-y min-h-[40px] max-h-32"
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
|
||||||
|
e.preventDefault();
|
||||||
|
if (noteText.trim()) {
|
||||||
|
setAddingNote(true);
|
||||||
|
addProgressNote(task.id, noteText.trim())
|
||||||
|
.then(() => { setNoteText(""); fetchTask(); })
|
||||||
|
.catch((err) => console.error("Failed to add note:", err))
|
||||||
|
.finally(() => setAddingNote(false));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
if (!noteText.trim()) return;
|
||||||
|
setAddingNote(true);
|
||||||
|
addProgressNote(task.id, noteText.trim())
|
||||||
|
.then(() => { setNoteText(""); fetchTask(); })
|
||||||
|
.catch((err) => console.error("Failed to add note:", err))
|
||||||
|
.finally(() => setAddingNote(false));
|
||||||
|
}}
|
||||||
|
disabled={!noteText.trim() || addingNote}
|
||||||
|
className="self-end px-4 py-2 bg-amber-500 text-white text-sm rounded-lg font-medium hover:bg-amber-600 transition disabled:opacity-50 disabled:cursor-not-allowed shrink-0"
|
||||||
|
>
|
||||||
|
{addingNote ? "..." : "Add"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p className="text-[10px] text-gray-400 mt-1">⌘+Enter to submit</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Notes list */}
|
||||||
|
{!task.progressNotes || task.progressNotes.length === 0 ? (
|
||||||
|
<div className="text-sm text-gray-400 italic py-6 text-center border-2 border-dashed border-gray-100 rounded-lg">
|
||||||
|
No progress notes yet
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-0">
|
||||||
|
{task.progressNotes
|
||||||
|
.slice()
|
||||||
|
.reverse()
|
||||||
|
.map((note, i) => (
|
||||||
|
<div key={i} className="relative pl-6 pb-4 last:pb-0 group">
|
||||||
|
{i < task.progressNotes.length - 1 && (
|
||||||
|
<div className="absolute left-[9px] top-3 bottom-0 w-0.5 bg-gray-200 group-last:hidden" />
|
||||||
|
)}
|
||||||
|
<div className={`absolute left-0 top-1 w-[18px] h-[18px] rounded-full border-2 flex items-center justify-center ${
|
||||||
|
i === 0 && isActive ? "border-amber-400 bg-amber-50" : "border-gray-300 bg-white"
|
||||||
|
}`}>
|
||||||
|
<div className={`w-2 h-2 rounded-full ${i === 0 && isActive ? "bg-amber-500" : "bg-gray-300"}`} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-700 leading-relaxed">{note.note}</p>
|
||||||
|
<p className="text-xs text-gray-400 mt-0.5">{formatDate(note.timestamp)} · {timeAgo(note.timestamp)}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sidebar */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Meta */}
|
||||||
|
<div className="bg-white rounded-xl border border-gray-200 shadow-sm p-4">
|
||||||
|
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Details</h3>
|
||||||
|
<div className="space-y-3 text-sm">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-gray-500">Source</span>
|
||||||
|
<span className="text-gray-700 font-medium capitalize">{task.source}</span>
|
||||||
|
</div>
|
||||||
|
{task.assigneeName && (
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-gray-500">Assignee</span>
|
||||||
|
<span className="text-gray-700 font-medium">{task.assigneeName}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{project && (
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-gray-500">Project</span>
|
||||||
|
<span className="text-gray-700 font-medium">{project.name}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-gray-500">Created</span>
|
||||||
|
<span className="text-gray-700 text-xs">{timeAgo(task.createdAt)}</span>
|
||||||
|
</div>
|
||||||
|
{task.updatedAt !== task.createdAt && (
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-gray-500">Updated</span>
|
||||||
|
<span className="text-gray-700 text-xs">{timeAgo(task.updatedAt)}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{task.completedAt && (
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-gray-500">Completed</span>
|
||||||
|
<span className="text-gray-700 text-xs">{timeAgo(task.completedAt)}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick link */}
|
||||||
|
<div className="bg-white rounded-xl border border-gray-200 shadow-sm p-4">
|
||||||
|
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Share</h3>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<code className="text-xs text-gray-500 font-mono bg-gray-50 px-2 py-1 rounded flex-1 truncate">
|
||||||
|
/task/HQ-{task.taskNumber}
|
||||||
|
</code>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
const url = `${window.location.origin}/task/HQ-${task.taskNumber}`;
|
||||||
|
navigator.clipboard.writeText(url);
|
||||||
|
}}
|
||||||
|
className="text-xs px-2 py-1 bg-gray-100 rounded hover:bg-gray-200 transition"
|
||||||
|
>
|
||||||
|
📋
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user