From 0cc18448e4852e2f6b9080289a615bf0b96373ab Mon Sep 17 00:00:00 2001
From: alikia2x <alikia2x@outlook.com>
Date: Mon, 8 Dec 2025 19:31:26 +0800
Subject: [PATCH] ref: format

---
 packages/core/db/dbNew.ts                     |    2 +-
 packages/core/drizzle.config.ts               |    2 +-
 packages/core/drizzle/index.ts                |    2 +-
 packages/core/drizzle/main/relations.ts       |   40 +-
 packages/core/drizzle/main/schema.ts          |  886 +++++++-----
 packages/core/lib/index.ts                    |    2 +-
 packages/core/lib/math.ts                     |    3 +-
 packages/core/lib/type.ts                     |    2 +-
 packages/core/net/delegate.ts                 |   10 +-
 packages/core/test/netDelegate.test.ts        |    7 +-
 packages/crawler/mq/task/collectSongs.ts      |    2 +-
 packages/crawler/mq/task/getVideoStats.ts     |    2 +-
 packages/palette/.vercel/project.json         |    6 +-
 packages/palette/index.html                   |    5 +-
 packages/palette/src/App.tsx                  |   12 +-
 packages/palette/src/Switch.tsx               |   16 +-
 .../palette/src/components/ColorBlock.tsx     |   12 +-
 .../palette/src/components/Components.tsx     |   18 +-
 .../palette/src/components/Picker/Picker.tsx  |   12 +-
 .../palette/src/components/Picker/Slider.tsx  |    8 +-
 .../temp_frontend/app/components/Search.tsx   |    4 +-
 .../app/components/SearchResults.tsx          |    2 +-
 .../app/components/ui/alert-dialog.tsx        |  212 ++-
 .../temp_frontend/app/components/ui/card.tsx  |  105 +-
 .../temp_frontend/app/components/ui/chart.tsx |  555 ++++----
 .../app/components/ui/dialog.tsx              |  206 ++-
 .../temp_frontend/app/components/ui/label.tsx |   33 +-
 .../app/components/ui/progress.tsx            |   43 +-
 .../app/components/ui/select.tsx              |  285 ++--
 .../app/components/ui/skeleton.tsx            |   12 +-
 .../temp_frontend/app/components/ui/table.tsx |  137 +-
 packages/temp_frontend/app/root.tsx           |    2 +-
 .../app/routes/home/MilestoneVideoCard.tsx    |    4 +-
 .../routes/labelling/LabelInstructions.tsx    |   16 +-
 .../app/routes/labelling/VideoInfo.tsx        |    1 -
 packages/temp_frontend/app/routes/login.tsx   |    2 +-
 .../app/routes/video/[id]/info/index.tsx      |   15 +-
 .../temp_frontend/public/site.webmanifest     |   12 +-
 packages/temp_frontend/wrangler.jsonc         |    4 +-
 packages/tracker/app/admin/users.tsx          |  109 +-
 packages/tracker/app/app.css                  |   32 +-
 .../app/components/project/ProjectDialog.tsx  |   29 +-
 .../app/components/project/UserSearch.tsx     |    1 -
 .../tracker/app/components/task/TaskForm.tsx  |    4 +-
 .../app/components/ui/alert-dialog.tsx        |  212 ++-
 packages/tracker/app/components/ui/badge.tsx  |   70 +-
 packages/tracker/app/components/ui/button.tsx |  100 +-
 .../tracker/app/components/ui/calendar.tsx    |  364 +++--
 packages/tracker/app/components/ui/card.tsx   |  124 +-
 .../tracker/app/components/ui/checkbox.tsx    |   49 +-
 packages/tracker/app/components/ui/dialog.tsx |  204 ++-
 packages/tracker/app/components/ui/input.tsx  |   32 +-
 packages/tracker/app/components/ui/label.tsx  |   33 +-
 .../tracker/app/components/ui/popover.tsx     |   64 +-
 .../tracker/app/components/ui/scroll-area.tsx |   90 +-
 packages/tracker/app/components/ui/select.tsx |  283 ++--
 .../tracker/app/components/ui/separator.tsx   |   42 +-
 packages/tracker/app/components/ui/sheet.tsx  |  199 ++-
 .../tracker/app/components/ui/sidebar.tsx     | 1192 ++++++++---------
 .../tracker/app/components/ui/skeleton.tsx    |   18 +-
 packages/tracker/app/components/ui/sonner.tsx |   68 +-
 .../tracker/app/components/ui/spinner.tsx     |   22 +-
 packages/tracker/app/components/ui/table.tsx  |  156 +--
 .../tracker/app/components/ui/textarea.tsx    |   26 +-
 .../tracker/app/components/ui/tooltip.tsx     |   88 +-
 packages/tracker/app/home/home.tsx            |   12 +-
 packages/tracker/app/hooks/use-mobile.ts      |   26 +-
 packages/tracker/app/lib/utils.ts             |    6 +-
 packages/tracker/app/login/action.ts          |    4 +-
 packages/tracker/app/login/page.tsx           |    2 +-
 .../tracker/app/projects/projectPageAction.ts |    2 +-
 packages/tracker/app/root.tsx                 |    2 +-
 packages/tracker/app/routes.ts                |    4 +-
 packages/tracker/app/setup/setup.tsx          |   17 +-
 packages/tracker/components.json              |   40 +-
 packages/tracker/drizzle.config.ts            |    2 +-
 packages/tracker/lib/auth-utils.ts            |    2 +-
 packages/tracker/lib/auth.ts                  |   16 +-
 packages/tracker/lib/db/index.ts              |    1 -
 packages/tracker/public/site.webmanifest      |   12 +-
 80 files changed, 3229 insertions(+), 3229 deletions(-)

diff --git a/packages/core/db/dbNew.ts b/packages/core/db/dbNew.ts
index 15e537d..0493ab0 100644
--- a/packages/core/db/dbNew.ts
+++ b/packages/core/db/dbNew.ts
@@ -1,4 +1,4 @@
 import postgres from "postgres";
 import { postgresConfig } from "./pgConfigNew";
 
-export const sql = postgres(postgresConfig);
\ No newline at end of file
+export const sql = postgres(postgresConfig);
diff --git a/packages/core/drizzle.config.ts b/packages/core/drizzle.config.ts
index 56da063..712f00d 100644
--- a/packages/core/drizzle.config.ts
+++ b/packages/core/drizzle.config.ts
@@ -7,5 +7,5 @@ export default defineConfig({
 	dbCredentials: {
 		url: process.env.DATABASE_URL_MAIN!
 	},
-    schemaFilter: ["public", "credentials", "internal"]
+	schemaFilter: ["public", "credentials", "internal"]
 });
diff --git a/packages/core/drizzle/index.ts b/packages/core/drizzle/index.ts
index 34d947f..be32725 100644
--- a/packages/core/drizzle/index.ts
+++ b/packages/core/drizzle/index.ts
@@ -5,4 +5,4 @@ import { sql } from "@core/db/dbNew";
 
 export const db = drizzle(sql);
 export * from "./main/schema";
-export * from "./type";
\ No newline at end of file
+export * from "./type";
diff --git a/packages/core/drizzle/main/relations.ts b/packages/core/drizzle/main/relations.ts
index 6ec9fdc..a9fd6e2 100644
--- a/packages/core/drizzle/main/relations.ts
+++ b/packages/core/drizzle/main/relations.ts
@@ -1,31 +1,39 @@
 import { relations } from "drizzle-orm/relations";
-import { usersInCredentials, history, songs, relationsProducer, singer, relationSinger, videoTypeLabelInInternal } from "./schema";
+import {
+	usersInCredentials,
+	history,
+	songs,
+	relationsProducer,
+	singer,
+	relationSinger,
+	videoTypeLabelInInternal
+} from "./schema";
 
-export const historyRelations = relations(history, ({one}) => ({
+export const historyRelations = relations(history, ({ one }) => ({
 	usersInCredential: one(usersInCredentials, {
 		fields: [history.changedBy],
 		references: [usersInCredentials.unqId]
-	}),
+	})
 }));
 
-export const usersInCredentialsRelations = relations(usersInCredentials, ({many}) => ({
+export const usersInCredentialsRelations = relations(usersInCredentials, ({ many }) => ({
 	histories: many(history),
-	videoTypeLabelInInternals: many(videoTypeLabelInInternal),
+	videoTypeLabelInInternals: many(videoTypeLabelInInternal)
 }));
 
-export const relationsProducerRelations = relations(relationsProducer, ({one}) => ({
+export const relationsProducerRelations = relations(relationsProducer, ({ one }) => ({
 	song: one(songs, {
 		fields: [relationsProducer.songId],
 		references: [songs.id]
-	}),
+	})
 }));
 
-export const songsRelations = relations(songs, ({many}) => ({
+export const songsRelations = relations(songs, ({ many }) => ({
 	relationsProducers: many(relationsProducer),
-	relationSingers: many(relationSinger),
+	relationSingers: many(relationSinger)
 }));
 
-export const relationSingerRelations = relations(relationSinger, ({one}) => ({
+export const relationSingerRelations = relations(relationSinger, ({ one }) => ({
 	singer: one(singer, {
 		fields: [relationSinger.singerId],
 		references: [singer.id]
@@ -33,16 +41,16 @@ export const relationSingerRelations = relations(relationSinger, ({one}) => ({
 	song: one(songs, {
 		fields: [relationSinger.songId],
 		references: [songs.id]
-	}),
+	})
 }));
 
-export const singerRelations = relations(singer, ({many}) => ({
-	relationSingers: many(relationSinger),
+export const singerRelations = relations(singer, ({ many }) => ({
+	relationSingers: many(relationSinger)
 }));
 
-export const videoTypeLabelInInternalRelations = relations(videoTypeLabelInInternal, ({one}) => ({
+export const videoTypeLabelInInternalRelations = relations(videoTypeLabelInInternal, ({ one }) => ({
 	usersInCredential: one(usersInCredentials, {
 		fields: [videoTypeLabelInInternal.user],
 		references: [usersInCredentials.unqId]
-	}),
-}));
\ No newline at end of file
+	})
+}));
diff --git a/packages/core/drizzle/main/schema.ts b/packages/core/drizzle/main/schema.ts
index 8da0a25..1331adc 100644
--- a/packages/core/drizzle/main/schema.ts
+++ b/packages/core/drizzle/main/schema.ts
@@ -1,351 +1,617 @@
-import { pgTable, pgSchema, uniqueIndex, check, integer, text, timestamp, foreignKey, serial, bigint, jsonb, index, inet, varchar, smallint, real, boolean, bigserial, unique, pgSequence } from "drizzle-orm/pg-core"
-import { sql } from "drizzle-orm"
+import {
+	pgTable,
+	pgSchema,
+	uniqueIndex,
+	check,
+	integer,
+	text,
+	timestamp,
+	foreignKey,
+	serial,
+	bigint,
+	jsonb,
+	index,
+	inet,
+	varchar,
+	smallint,
+	real,
+	boolean,
+	bigserial,
+	unique,
+	pgSequence
+} from "drizzle-orm/pg-core";
+import { sql } from "drizzle-orm";
 
 export const credentials = pgSchema("credentials");
 export const internal = pgSchema("internal");
-export const userRoleInCredentials = credentials.enum("user_role", ['ADMIN', 'USER', 'OWNER'])
+export const userRoleInCredentials = credentials.enum("user_role", ["ADMIN", "USER", "OWNER"]);
 
-export const usersIdSeqInCredentials = credentials.sequence("users_id_seq", {  startWith: "1", increment: "1", minValue: "1", maxValue: "2147483647", cache: "1", cycle: false })
-export const allDataIdSeq = pgSequence("all_data_id_seq", {  startWith: "1", increment: "1", minValue: "1", maxValue: "2147483647", cache: "1", cycle: false })
-export const labelingResultIdSeq = pgSequence("labeling_result_id_seq", {  startWith: "1", increment: "1", minValue: "1", maxValue: "2147483647", cache: "1", cycle: false })
-export const relationSingerIdSeq = pgSequence("relation_singer_id_seq", {  startWith: "1", increment: "1", minValue: "1", maxValue: "2147483647", cache: "1", cycle: false })
-export const relationsProducerIdSeq = pgSequence("relations_producer_id_seq", {  startWith: "1", increment: "1", minValue: "1", maxValue: "2147483647", cache: "1", cycle: false })
-export const songsIdSeq = pgSequence("songs_id_seq", {  startWith: "1", increment: "1", minValue: "1", maxValue: "2147483647", cache: "1", cycle: false })
-export const videoSnapshotIdSeq = pgSequence("video_snapshot_id_seq", {  startWith: "1", increment: "1", minValue: "1", maxValue: "2147483647", cache: "1", cycle: false })
-export const viewsIncrementRateIdSeq = pgSequence("views_increment_rate_id_seq", {  startWith: "1", increment: "1", minValue: "1", maxValue: "9223372036854775807", cache: "1", cycle: false })
+export const usersIdSeqInCredentials = credentials.sequence("users_id_seq", {
+	startWith: "1",
+	increment: "1",
+	minValue: "1",
+	maxValue: "2147483647",
+	cache: "1",
+	cycle: false
+});
+export const allDataIdSeq = pgSequence("all_data_id_seq", {
+	startWith: "1",
+	increment: "1",
+	minValue: "1",
+	maxValue: "2147483647",
+	cache: "1",
+	cycle: false
+});
+export const labelingResultIdSeq = pgSequence("labeling_result_id_seq", {
+	startWith: "1",
+	increment: "1",
+	minValue: "1",
+	maxValue: "2147483647",
+	cache: "1",
+	cycle: false
+});
+export const relationSingerIdSeq = pgSequence("relation_singer_id_seq", {
+	startWith: "1",
+	increment: "1",
+	minValue: "1",
+	maxValue: "2147483647",
+	cache: "1",
+	cycle: false
+});
+export const relationsProducerIdSeq = pgSequence("relations_producer_id_seq", {
+	startWith: "1",
+	increment: "1",
+	minValue: "1",
+	maxValue: "2147483647",
+	cache: "1",
+	cycle: false
+});
+export const songsIdSeq = pgSequence("songs_id_seq", {
+	startWith: "1",
+	increment: "1",
+	minValue: "1",
+	maxValue: "2147483647",
+	cache: "1",
+	cycle: false
+});
+export const videoSnapshotIdSeq = pgSequence("video_snapshot_id_seq", {
+	startWith: "1",
+	increment: "1",
+	minValue: "1",
+	maxValue: "2147483647",
+	cache: "1",
+	cycle: false
+});
+export const viewsIncrementRateIdSeq = pgSequence("views_increment_rate_id_seq", {
+	startWith: "1",
+	increment: "1",
+	minValue: "1",
+	maxValue: "9223372036854775807",
+	cache: "1",
+	cycle: false
+});
 
-export const usersInCredentials = credentials.table("users", {
-	id: integer().default(sql`nextval('credentials.users_id_seq'::regclass)`).notNull(),
-	nickname: text(),
-	username: text().notNull(),
-	password: text().notNull(),
-	unqId: text("unq_id").notNull(),
-	role: userRoleInCredentials().default('USER').notNull(),
-	createdAt: timestamp("created_at", { withTimezone: true, mode: 'string' }).default(sql`CURRENT_TIMESTAMP`).notNull(),
-}, (table) => [
-	uniqueIndex("users_pkey").using("btree", table.id.asc().nullsLast().op("int4_ops")),
-	uniqueIndex("users_pkey1").using("btree", table.id.asc().nullsLast().op("int4_ops")),
-	uniqueIndex("users_username_key").using("btree", table.username.asc().nullsLast().op("text_ops")),
-	check("users_id_not_null", sql`NOT NULL id`),
-	check("users_username_not_null", sql`NOT NULL username`),
-	check("users_password_not_null", sql`NOT NULL password`),
-	check("users_unq_id_not_null", sql`NOT NULL unq_id`),
-	check("users_role_not_null", sql`NOT NULL role`),
-	check("users_created_at_not_null", sql`NOT NULL created_at`),
-]);
+export const usersInCredentials = credentials.table(
+	"users",
+	{
+		id: integer()
+			.default(sql`nextval('credentials.users_id_seq'::regclass)`)
+			.notNull(),
+		nickname: text(),
+		username: text().notNull(),
+		password: text().notNull(),
+		unqId: text("unq_id").notNull(),
+		role: userRoleInCredentials().default("USER").notNull(),
+		createdAt: timestamp("created_at", { withTimezone: true, mode: "string" })
+			.default(sql`CURRENT_TIMESTAMP`)
+			.notNull()
+	},
+	(table) => [
+		uniqueIndex("users_pkey").using("btree", table.id.asc().nullsLast().op("int4_ops")),
+		uniqueIndex("users_pkey1").using("btree", table.id.asc().nullsLast().op("int4_ops")),
+		uniqueIndex("users_username_key").using(
+			"btree",
+			table.username.asc().nullsLast().op("text_ops")
+		),
+		check("users_id_not_null", sql`NOT NULL id`),
+		check("users_username_not_null", sql`NOT NULL username`),
+		check("users_password_not_null", sql`NOT NULL password`),
+		check("users_unq_id_not_null", sql`NOT NULL unq_id`),
+		check("users_role_not_null", sql`NOT NULL role`),
+		check("users_created_at_not_null", sql`NOT NULL created_at`)
+	]
+);
 
-export const history = pgTable("history", {
-	id: serial().primaryKey().notNull(),
-	// You can use { mode: "bigint" } if numbers are exceeding js number limitations
-	objectId: bigint("object_id", { mode: "number" }).notNull(),
-	changeType: text("change_type").notNull(),
-	changedAt: timestamp("changed_at", { withTimezone: true, mode: 'string' }).default(sql`CURRENT_TIMESTAMP`).notNull(),
-	changedBy: text("changed_by").notNull(),
-	data: jsonb(),
-}, (table) => [
-	foreignKey({
+export const history = pgTable(
+	"history",
+	{
+		id: serial().primaryKey().notNull(),
+		// You can use { mode: "bigint" } if numbers are exceeding js number limitations
+		objectId: bigint("object_id", { mode: "number" }).notNull(),
+		changeType: text("change_type").notNull(),
+		changedAt: timestamp("changed_at", { withTimezone: true, mode: "string" })
+			.default(sql`CURRENT_TIMESTAMP`)
+			.notNull(),
+		changedBy: text("changed_by").notNull(),
+		data: jsonb()
+	},
+	(table) => [
+		foreignKey({
 			columns: [table.changedBy],
 			foreignColumns: [usersInCredentials.unqId],
 			name: "rel_history_changed_by"
 		}),
-	check("history_id_not_null", sql`NOT NULL id`),
-	check("history_object_id_not_null", sql`NOT NULL object_id`),
-	check("history_change_type_not_null", sql`NOT NULL change_type`),
-	check("history_changed_at_not_null", sql`NOT NULL changed_at`),
-	check("history_changed_by_not_null", sql`NOT NULL changed_by`),
-]);
+		check("history_id_not_null", sql`NOT NULL id`),
+		check("history_object_id_not_null", sql`NOT NULL object_id`),
+		check("history_change_type_not_null", sql`NOT NULL change_type`),
+		check("history_changed_at_not_null", sql`NOT NULL changed_at`),
+		check("history_changed_by_not_null", sql`NOT NULL changed_by`)
+	]
+);
 
-export const loginSessionsInCredentials = credentials.table("login_sessions", {
-	id: text().notNull(),
-	uid: integer().notNull(),
-	createdAt: timestamp("created_at", { withTimezone: true, mode: 'string' }).default(sql`CURRENT_TIMESTAMP`).notNull(),
-	expireAt: timestamp("expire_at", { withTimezone: true, mode: 'string' }),
-	lastUsedAt: timestamp("last_used_at", { withTimezone: true, mode: 'string' }),
-	ipAddress: inet("ip_address"),
-	userAgent: text("user_agent"),
-	deactivatedAt: timestamp("deactivated_at", { withTimezone: true, mode: 'string' }),
-}, (table) => [
-	index("inx_login-sessions_uid").using("btree", table.uid.asc().nullsLast().op("int4_ops")),
-	uniqueIndex("login_sessions_pkey").using("btree", table.id.asc().nullsLast().op("text_ops")),
-	check("login_sessions_id_not_null", sql`NOT NULL id`),
-	check("login_sessions_uid_not_null", sql`NOT NULL uid`),
-	check("login_sessions_created_at_not_null", sql`NOT NULL created_at`),
-]);
+export const loginSessionsInCredentials = credentials.table(
+	"login_sessions",
+	{
+		id: text().notNull(),
+		uid: integer().notNull(),
+		createdAt: timestamp("created_at", { withTimezone: true, mode: "string" })
+			.default(sql`CURRENT_TIMESTAMP`)
+			.notNull(),
+		expireAt: timestamp("expire_at", { withTimezone: true, mode: "string" }),
+		lastUsedAt: timestamp("last_used_at", { withTimezone: true, mode: "string" }),
+		ipAddress: inet("ip_address"),
+		userAgent: text("user_agent"),
+		deactivatedAt: timestamp("deactivated_at", { withTimezone: true, mode: "string" })
+	},
+	(table) => [
+		index("inx_login-sessions_uid").using("btree", table.uid.asc().nullsLast().op("int4_ops")),
+		uniqueIndex("login_sessions_pkey").using(
+			"btree",
+			table.id.asc().nullsLast().op("text_ops")
+		),
+		check("login_sessions_id_not_null", sql`NOT NULL id`),
+		check("login_sessions_uid_not_null", sql`NOT NULL uid`),
+		check("login_sessions_created_at_not_null", sql`NOT NULL created_at`)
+	]
+);
 
-export const bilibiliMetadata = pgTable("bilibili_metadata", {
-	id: integer().default(sql`nextval('all_data_id_seq'::regclass)`).notNull(),
-	// You can use { mode: "bigint" } if numbers are exceeding js number limitations
-	aid: bigint({ mode: "number" }).notNull(),
-	bvid: varchar({ length: 12 }),
-	description: text(),
-	// You can use { mode: "bigint" } if numbers are exceeding js number limitations
-	uid: bigint({ mode: "number" }),
-	tags: text(),
-	title: text(),
-	publishedAt: timestamp("published_at", { withTimezone: true, mode: 'string' }),
-	duration: integer(),
-	createdAt: timestamp("created_at", { withTimezone: true, mode: 'string' }).default(sql`CURRENT_TIMESTAMP`),
-	status: integer().default(0).notNull(),
-	coverUrl: text("cover_url"),
-}, (table) => [
-	uniqueIndex("all_data_pkey").using("btree", table.id.asc().nullsLast().op("int4_ops")),
-	index("idx_all-data_aid").using("btree", table.aid.asc().nullsLast().op("int8_ops")),
-	index("idx_all-data_bvid").using("btree", table.bvid.asc().nullsLast().op("text_ops")),
-	index("idx_all-data_uid").using("btree", table.uid.asc().nullsLast().op("int8_ops")),
-	index("idx_bili-meta_status").using("btree", table.status.asc().nullsLast().op("int4_ops")),
-	uniqueIndex("unq_all-data_aid").using("btree", table.aid.asc().nullsLast().op("int8_ops")),
-	check("bilibili_metadata_id_not_null", sql`NOT NULL id`),
-	check("bilibili_metadata_aid_not_null", sql`NOT NULL aid`),
-	check("bilibili_metadata_status_not_null", sql`NOT NULL status`),
-]);
+export const bilibiliMetadata = pgTable(
+	"bilibili_metadata",
+	{
+		id: integer()
+			.default(sql`nextval('all_data_id_seq'::regclass)`)
+			.notNull(),
+		// You can use { mode: "bigint" } if numbers are exceeding js number limitations
+		aid: bigint({ mode: "number" }).notNull(),
+		bvid: varchar({ length: 12 }),
+		description: text(),
+		// You can use { mode: "bigint" } if numbers are exceeding js number limitations
+		uid: bigint({ mode: "number" }),
+		tags: text(),
+		title: text(),
+		publishedAt: timestamp("published_at", { withTimezone: true, mode: "string" }),
+		duration: integer(),
+		createdAt: timestamp("created_at", { withTimezone: true, mode: "string" }).default(
+			sql`CURRENT_TIMESTAMP`
+		),
+		status: integer().default(0).notNull(),
+		coverUrl: text("cover_url")
+	},
+	(table) => [
+		uniqueIndex("all_data_pkey").using("btree", table.id.asc().nullsLast().op("int4_ops")),
+		index("idx_all-data_aid").using("btree", table.aid.asc().nullsLast().op("int8_ops")),
+		index("idx_all-data_bvid").using("btree", table.bvid.asc().nullsLast().op("text_ops")),
+		index("idx_all-data_uid").using("btree", table.uid.asc().nullsLast().op("int8_ops")),
+		index("idx_bili-meta_status").using("btree", table.status.asc().nullsLast().op("int4_ops")),
+		uniqueIndex("unq_all-data_aid").using("btree", table.aid.asc().nullsLast().op("int8_ops")),
+		check("bilibili_metadata_id_not_null", sql`NOT NULL id`),
+		check("bilibili_metadata_aid_not_null", sql`NOT NULL aid`),
+		check("bilibili_metadata_status_not_null", sql`NOT NULL status`)
+	]
+);
 
-export const humanClassifiedLables = pgTable("human_classified_lables", {
-	id: serial().primaryKey().notNull(),
-	// You can use { mode: "bigint" } if numbers are exceeding js number limitations
-	aid: bigint({ mode: "number" }).notNull(),
-	uid: integer().notNull(),
-	label: smallint().notNull(),
-	createdAt: timestamp("created_at", { withTimezone: true, mode: 'string' }).default(sql`CURRENT_TIMESTAMP`).notNull(),
-}, (table) => [
-	index("idx_classified-labels-human_aid").using("btree", table.aid.asc().nullsLast().op("int8_ops")),
-	index("idx_classified-labels-human_author").using("btree", table.uid.asc().nullsLast().op("int4_ops")),
-	index("idx_classified-labels-human_created-at").using("btree", table.createdAt.asc().nullsLast().op("timestamptz_ops")),
-	index("idx_classified-labels-human_label").using("btree", table.label.asc().nullsLast().op("int2_ops")),
-	check("human_classified_lables_id_not_null", sql`NOT NULL id`),
-	check("human_classified_lables_aid_not_null", sql`NOT NULL aid`),
-	check("human_classified_lables_uid_not_null", sql`NOT NULL uid`),
-	check("human_classified_lables_label_not_null", sql`NOT NULL label`),
-	check("human_classified_lables_created_at_not_null", sql`NOT NULL created_at`),
-]);
+export const humanClassifiedLables = pgTable(
+	"human_classified_lables",
+	{
+		id: serial().primaryKey().notNull(),
+		// You can use { mode: "bigint" } if numbers are exceeding js number limitations
+		aid: bigint({ mode: "number" }).notNull(),
+		uid: integer().notNull(),
+		label: smallint().notNull(),
+		createdAt: timestamp("created_at", { withTimezone: true, mode: "string" })
+			.default(sql`CURRENT_TIMESTAMP`)
+			.notNull()
+	},
+	(table) => [
+		index("idx_classified-labels-human_aid").using(
+			"btree",
+			table.aid.asc().nullsLast().op("int8_ops")
+		),
+		index("idx_classified-labels-human_author").using(
+			"btree",
+			table.uid.asc().nullsLast().op("int4_ops")
+		),
+		index("idx_classified-labels-human_created-at").using(
+			"btree",
+			table.createdAt.asc().nullsLast().op("timestamptz_ops")
+		),
+		index("idx_classified-labels-human_label").using(
+			"btree",
+			table.label.asc().nullsLast().op("int2_ops")
+		),
+		check("human_classified_lables_id_not_null", sql`NOT NULL id`),
+		check("human_classified_lables_aid_not_null", sql`NOT NULL aid`),
+		check("human_classified_lables_uid_not_null", sql`NOT NULL uid`),
+		check("human_classified_lables_label_not_null", sql`NOT NULL label`),
+		check("human_classified_lables_created_at_not_null", sql`NOT NULL created_at`)
+	]
+);
 
-export const videoSnapshot = pgTable("video_snapshot", {
-	id: integer().default(sql`nextval('video_snapshot_id_seq'::regclass)`).notNull(),
-	createdAt: timestamp("created_at", { withTimezone: true, mode: 'string' }).default(sql`CURRENT_TIMESTAMP`).notNull(),
-	views: integer().notNull(),
-	coins: integer(),
-	likes: integer(),
-	favorites: integer(),
-	shares: integer(),
-	danmakus: integer(),
-	// You can use { mode: "bigint" } if numbers are exceeding js number limitations
-	aid: bigint({ mode: "number" }).notNull(),
-	replies: integer(),
-}, (table) => [
-	index("idx_vid_snapshot_aid_created_at").using("btree", table.aid.asc().nullsLast().op("int8_ops"), table.createdAt.asc().nullsLast().op("int8_ops")),
-	index("idx_vid_snapshot_time").using("btree", table.createdAt.asc().nullsLast().op("timestamptz_ops")),
-	check("video_snapshot_id_not_null", sql`NOT NULL id`),
-	check("video_snapshot_created_at_not_null", sql`NOT NULL created_at`),
-	check("video_snapshot_views_not_null", sql`NOT NULL views`),
-	check("video_snapshot_aid_not_null", sql`NOT NULL aid`),
-]);
+export const videoSnapshot = pgTable(
+	"video_snapshot",
+	{
+		id: integer()
+			.default(sql`nextval('video_snapshot_id_seq'::regclass)`)
+			.notNull(),
+		createdAt: timestamp("created_at", { withTimezone: true, mode: "string" })
+			.default(sql`CURRENT_TIMESTAMP`)
+			.notNull(),
+		views: integer().notNull(),
+		coins: integer(),
+		likes: integer(),
+		favorites: integer(),
+		shares: integer(),
+		danmakus: integer(),
+		// You can use { mode: "bigint" } if numbers are exceeding js number limitations
+		aid: bigint({ mode: "number" }).notNull(),
+		replies: integer()
+	},
+	(table) => [
+		index("idx_vid_snapshot_aid_created_at").using(
+			"btree",
+			table.aid.asc().nullsLast().op("int8_ops"),
+			table.createdAt.asc().nullsLast().op("int8_ops")
+		),
+		index("idx_vid_snapshot_time").using(
+			"btree",
+			table.createdAt.asc().nullsLast().op("timestamptz_ops")
+		),
+		check("video_snapshot_id_not_null", sql`NOT NULL id`),
+		check("video_snapshot_created_at_not_null", sql`NOT NULL created_at`),
+		check("video_snapshot_views_not_null", sql`NOT NULL views`),
+		check("video_snapshot_aid_not_null", sql`NOT NULL aid`)
+	]
+);
 
-export const producer = pgTable("producer", {
-	id: integer().primaryKey().notNull(),
-	name: text().notNull(),
-}, (table) => [
-	check("producer_id_not_null", sql`NOT NULL id`),
-	check("producer_name_not_null", sql`NOT NULL name`),
-]);
+export const producer = pgTable(
+	"producer",
+	{
+		id: integer().primaryKey().notNull(),
+		name: text().notNull()
+	},
+	(table) => [
+		check("producer_id_not_null", sql`NOT NULL id`),
+		check("producer_name_not_null", sql`NOT NULL name`)
+	]
+);
 
-export const labellingResult = pgTable("labelling_result", {
-	id: integer().default(sql`nextval('labeling_result_id_seq'::regclass)`).notNull(),
-	// You can use { mode: "bigint" } if numbers are exceeding js number limitations
-	aid: bigint({ mode: "number" }).notNull(),
-	label: smallint().notNull(),
-	modelVersion: text("model_version").notNull(),
-	createdAt: timestamp("created_at", { withTimezone: true, mode: 'string' }).default(sql`CURRENT_TIMESTAMP`).notNull(),
-	logits: smallint().array(),
-}, (table) => [
-	index("idx_labeling_label_model-version").using("btree", table.label.asc().nullsLast().op("int2_ops"), table.modelVersion.asc().nullsLast().op("int2_ops")),
-	index("idx_labeling_model-version").using("btree", table.modelVersion.asc().nullsLast().op("text_ops")),
-	index("idx_labelling_aid-label").using("btree", table.aid.asc().nullsLast().op("int2_ops"), table.label.asc().nullsLast().op("int2_ops")),
-	uniqueIndex("labeling_result_pkey").using("btree", table.id.asc().nullsLast().op("int4_ops")),
-	uniqueIndex("unq_labelling-result_aid_model-version").using("btree", table.aid.asc().nullsLast().op("int8_ops"), table.modelVersion.asc().nullsLast().op("int8_ops")),
-	check("labelling_result_id_not_null", sql`NOT NULL id`),
-	check("labelling_result_aid_not_null", sql`NOT NULL aid`),
-	check("labelling_result_label_not_null", sql`NOT NULL label`),
-	check("labelling_result_model_version_not_null", sql`NOT NULL model_version`),
-	check("labelling_result_created_at_not_null", sql`NOT NULL created_at`),
-]);
+export const labellingResult = pgTable(
+	"labelling_result",
+	{
+		id: integer()
+			.default(sql`nextval('labeling_result_id_seq'::regclass)`)
+			.notNull(),
+		// You can use { mode: "bigint" } if numbers are exceeding js number limitations
+		aid: bigint({ mode: "number" }).notNull(),
+		label: smallint().notNull(),
+		modelVersion: text("model_version").notNull(),
+		createdAt: timestamp("created_at", { withTimezone: true, mode: "string" })
+			.default(sql`CURRENT_TIMESTAMP`)
+			.notNull(),
+		logits: smallint().array()
+	},
+	(table) => [
+		index("idx_labeling_label_model-version").using(
+			"btree",
+			table.label.asc().nullsLast().op("int2_ops"),
+			table.modelVersion.asc().nullsLast().op("int2_ops")
+		),
+		index("idx_labeling_model-version").using(
+			"btree",
+			table.modelVersion.asc().nullsLast().op("text_ops")
+		),
+		index("idx_labelling_aid-label").using(
+			"btree",
+			table.aid.asc().nullsLast().op("int2_ops"),
+			table.label.asc().nullsLast().op("int2_ops")
+		),
+		uniqueIndex("labeling_result_pkey").using(
+			"btree",
+			table.id.asc().nullsLast().op("int4_ops")
+		),
+		uniqueIndex("unq_labelling-result_aid_model-version").using(
+			"btree",
+			table.aid.asc().nullsLast().op("int8_ops"),
+			table.modelVersion.asc().nullsLast().op("int8_ops")
+		),
+		check("labelling_result_id_not_null", sql`NOT NULL id`),
+		check("labelling_result_aid_not_null", sql`NOT NULL aid`),
+		check("labelling_result_label_not_null", sql`NOT NULL label`),
+		check("labelling_result_model_version_not_null", sql`NOT NULL model_version`),
+		check("labelling_result_created_at_not_null", sql`NOT NULL created_at`)
+	]
+);
 
-export const latestVideoSnapshot = pgTable("latest_video_snapshot", {
-	// You can use { mode: "bigint" } if numbers are exceeding js number limitations
-	aid: bigint({ mode: "number" }).primaryKey().notNull(),
-	time: timestamp({ withTimezone: true, mode: 'string' }).notNull(),
-	views: integer().notNull(),
-	coins: integer().notNull(),
-	likes: integer().notNull(),
-	favorites: integer().notNull(),
-	replies: integer().notNull(),
-	danmakus: integer().notNull(),
-	shares: integer().notNull(),
-}, (table) => [
-	index("idx_latest-video-snapshot_time").using("btree", table.time.asc().nullsLast().op("timestamptz_ops")),
-	index("idx_latest-video-snapshot_views").using("btree", table.views.asc().nullsLast().op("int4_ops")),
-	check("latest_video_snapshot_aid_not_null", sql`NOT NULL aid`),
-	check("latest_video_snapshot_time_not_null", sql`NOT NULL "time"`),
-	check("latest_video_snapshot_views_not_null", sql`NOT NULL views`),
-	check("latest_video_snapshot_coins_not_null", sql`NOT NULL coins`),
-	check("latest_video_snapshot_likes_not_null", sql`NOT NULL likes`),
-	check("latest_video_snapshot_favorites_not_null", sql`NOT NULL favorites`),
-	check("latest_video_snapshot_replies_not_null", sql`NOT NULL replies`),
-	check("latest_video_snapshot_danmakus_not_null", sql`NOT NULL danmakus`),
-	check("latest_video_snapshot_shares_not_null", sql`NOT NULL shares`),
-]);
+export const latestVideoSnapshot = pgTable(
+	"latest_video_snapshot",
+	{
+		// You can use { mode: "bigint" } if numbers are exceeding js number limitations
+		aid: bigint({ mode: "number" }).primaryKey().notNull(),
+		time: timestamp({ withTimezone: true, mode: "string" }).notNull(),
+		views: integer().notNull(),
+		coins: integer().notNull(),
+		likes: integer().notNull(),
+		favorites: integer().notNull(),
+		replies: integer().notNull(),
+		danmakus: integer().notNull(),
+		shares: integer().notNull()
+	},
+	(table) => [
+		index("idx_latest-video-snapshot_time").using(
+			"btree",
+			table.time.asc().nullsLast().op("timestamptz_ops")
+		),
+		index("idx_latest-video-snapshot_views").using(
+			"btree",
+			table.views.asc().nullsLast().op("int4_ops")
+		),
+		check("latest_video_snapshot_aid_not_null", sql`NOT NULL aid`),
+		check("latest_video_snapshot_time_not_null", sql`NOT NULL "time"`),
+		check("latest_video_snapshot_views_not_null", sql`NOT NULL views`),
+		check("latest_video_snapshot_coins_not_null", sql`NOT NULL coins`),
+		check("latest_video_snapshot_likes_not_null", sql`NOT NULL likes`),
+		check("latest_video_snapshot_favorites_not_null", sql`NOT NULL favorites`),
+		check("latest_video_snapshot_replies_not_null", sql`NOT NULL replies`),
+		check("latest_video_snapshot_danmakus_not_null", sql`NOT NULL danmakus`),
+		check("latest_video_snapshot_shares_not_null", sql`NOT NULL shares`)
+	]
+);
 
-export const relationsProducer = pgTable("relations_producer", {
-	id: integer().default(sql`nextval('relations_producer_id_seq'::regclass)`).primaryKey().notNull(),
-	// You can use { mode: "bigint" } if numbers are exceeding js number limitations
-	songId: bigint("song_id", { mode: "number" }).notNull(),
-	createdAt: timestamp("created_at", { withTimezone: true, mode: 'string' }).default(sql`CURRENT_TIMESTAMP`).notNull(),
-	producerId: integer("producer_id").notNull(),
-	updatedAt: timestamp("updated_at", { withTimezone: true, mode: 'string' }).default(sql`CURRENT_TIMESTAMP`).notNull(),
-}, (table) => [
-	foreignKey({
+export const relationsProducer = pgTable(
+	"relations_producer",
+	{
+		id: integer()
+			.default(sql`nextval('relations_producer_id_seq'::regclass)`)
+			.primaryKey()
+			.notNull(),
+		// You can use { mode: "bigint" } if numbers are exceeding js number limitations
+		songId: bigint("song_id", { mode: "number" }).notNull(),
+		createdAt: timestamp("created_at", { withTimezone: true, mode: "string" })
+			.default(sql`CURRENT_TIMESTAMP`)
+			.notNull(),
+		producerId: integer("producer_id").notNull(),
+		updatedAt: timestamp("updated_at", { withTimezone: true, mode: "string" })
+			.default(sql`CURRENT_TIMESTAMP`)
+			.notNull()
+	},
+	(table) => [
+		foreignKey({
 			columns: [table.songId],
 			foreignColumns: [songs.id],
 			name: "fkey_relations_producer_songs_id"
 		}),
-	check("relations_producer_id_not_null", sql`NOT NULL id`),
-	check("relations_producer_song_id_not_null", sql`NOT NULL song_id`),
-	check("relations_producer_created_at_not_null", sql`NOT NULL created_at`),
-	check("relations_producer_producer_id_not_null", sql`NOT NULL producer_id`),
-	check("relations_producer_updated_at_not_null", sql`NOT NULL updated_at`),
-]);
+		check("relations_producer_id_not_null", sql`NOT NULL id`),
+		check("relations_producer_song_id_not_null", sql`NOT NULL song_id`),
+		check("relations_producer_created_at_not_null", sql`NOT NULL created_at`),
+		check("relations_producer_producer_id_not_null", sql`NOT NULL producer_id`),
+		check("relations_producer_updated_at_not_null", sql`NOT NULL updated_at`)
+	]
+);
 
-export const eta = pgTable("eta", {
-	// You can use { mode: "bigint" } if numbers are exceeding js number limitations
-	aid: bigint({ mode: "number" }).primaryKey().notNull(),
-	eta: real().notNull(),
-	speed: real().notNull(),
-	currentViews: integer("current_views").notNull(),
-	updatedAt: timestamp("updated_at", { withTimezone: true, mode: 'string' }).defaultNow().notNull(),
-}, (table) => [
-	index("idx_eta_eta_current_views").using("btree", table.eta.asc().nullsLast().op("int4_ops"), table.currentViews.asc().nullsLast().op("int4_ops")),
-	check("eta_aid_not_null", sql`NOT NULL aid`),
-	check("eta_eta_not_null", sql`NOT NULL eta`),
-	check("eta_speed_not_null", sql`NOT NULL speed`),
-	check("eta_current_views_not_null", sql`NOT NULL current_views`),
-	check("eta_updated_at_not_null", sql`NOT NULL updated_at`),
-]);
+export const eta = pgTable(
+	"eta",
+	{
+		// You can use { mode: "bigint" } if numbers are exceeding js number limitations
+		aid: bigint({ mode: "number" }).primaryKey().notNull(),
+		eta: real().notNull(),
+		speed: real().notNull(),
+		currentViews: integer("current_views").notNull(),
+		updatedAt: timestamp("updated_at", { withTimezone: true, mode: "string" })
+			.defaultNow()
+			.notNull()
+	},
+	(table) => [
+		index("idx_eta_eta_current_views").using(
+			"btree",
+			table.eta.asc().nullsLast().op("int4_ops"),
+			table.currentViews.asc().nullsLast().op("int4_ops")
+		),
+		check("eta_aid_not_null", sql`NOT NULL aid`),
+		check("eta_eta_not_null", sql`NOT NULL eta`),
+		check("eta_speed_not_null", sql`NOT NULL speed`),
+		check("eta_current_views_not_null", sql`NOT NULL current_views`),
+		check("eta_updated_at_not_null", sql`NOT NULL updated_at`)
+	]
+);
 
-export const singer = pgTable("singer", {
-	id: serial().primaryKey().notNull(),
-	name: text().notNull(),
-}, (table) => [
-	check("singer_id_not_null", sql`NOT NULL id`),
-	check("singer_name_not_null", sql`NOT NULL name`),
-]);
+export const singer = pgTable(
+	"singer",
+	{
+		id: serial().primaryKey().notNull(),
+		name: text().notNull()
+	},
+	(table) => [
+		check("singer_id_not_null", sql`NOT NULL id`),
+		check("singer_name_not_null", sql`NOT NULL name`)
+	]
+);
 
-export const songs = pgTable("songs", {
-	id: integer().default(sql`nextval('songs_id_seq'::regclass)`).notNull(),
-	name: text(),
-	// You can use { mode: "bigint" } if numbers are exceeding js number limitations
-	aid: bigint({ mode: "number" }),
-	publishedAt: timestamp("published_at", { withTimezone: true, mode: 'string' }),
-	duration: integer(),
-	type: smallint(),
-	// You can use { mode: "bigint" } if numbers are exceeding js number limitations
-	neteaseId: bigint("netease_id", { mode: "number" }),
-	createdAt: timestamp("created_at", { withTimezone: true, mode: 'string' }).default(sql`CURRENT_TIMESTAMP`).notNull(),
-	updatedAt: timestamp("updated_at", { withTimezone: true, mode: 'string' }).default(sql`CURRENT_TIMESTAMP`).notNull(),
-	deleted: boolean().default(false).notNull(),
-	image: text(),
-	producer: text(),
-}, (table) => [
-	index("idx_hash_songs_aid").using("hash", table.aid.asc().nullsLast().op("int8_ops")),
-	index("idx_netease_id").using("btree", table.neteaseId.asc().nullsLast().op("int8_ops")),
-	index("idx_published_at").using("btree", table.publishedAt.asc().nullsLast().op("timestamptz_ops")),
-	index("idx_songs_name").using("gin", table.name.asc().nullsLast().op("gin_trgm_ops")),
-	index("idx_type").using("btree", table.type.asc().nullsLast().op("int2_ops")),
-	uniqueIndex("unq_songs_aid").using("btree", table.aid.asc().nullsLast().op("int8_ops")),
-	uniqueIndex("unq_songs_netease_id").using("btree", table.neteaseId.asc().nullsLast().op("int8_ops")),
-	check("songs_id_not_null", sql`NOT NULL id`),
-	check("songs_created_at_not_null", sql`NOT NULL created_at`),
-	check("songs_updated_at_not_null", sql`NOT NULL updated_at`),
-	check("songs_deleted_not_null", sql`NOT NULL deleted`),
-]);
+export const songs = pgTable(
+	"songs",
+	{
+		id: integer()
+			.default(sql`nextval('songs_id_seq'::regclass)`)
+			.notNull(),
+		name: text(),
+		// You can use { mode: "bigint" } if numbers are exceeding js number limitations
+		aid: bigint({ mode: "number" }),
+		publishedAt: timestamp("published_at", { withTimezone: true, mode: "string" }),
+		duration: integer(),
+		type: smallint(),
+		// You can use { mode: "bigint" } if numbers are exceeding js number limitations
+		neteaseId: bigint("netease_id", { mode: "number" }),
+		createdAt: timestamp("created_at", { withTimezone: true, mode: "string" })
+			.default(sql`CURRENT_TIMESTAMP`)
+			.notNull(),
+		updatedAt: timestamp("updated_at", { withTimezone: true, mode: "string" })
+			.default(sql`CURRENT_TIMESTAMP`)
+			.notNull(),
+		deleted: boolean().default(false).notNull(),
+		image: text(),
+		producer: text()
+	},
+	(table) => [
+		index("idx_hash_songs_aid").using("hash", table.aid.asc().nullsLast().op("int8_ops")),
+		index("idx_netease_id").using("btree", table.neteaseId.asc().nullsLast().op("int8_ops")),
+		index("idx_published_at").using(
+			"btree",
+			table.publishedAt.asc().nullsLast().op("timestamptz_ops")
+		),
+		index("idx_songs_name").using("gin", table.name.asc().nullsLast().op("gin_trgm_ops")),
+		index("idx_type").using("btree", table.type.asc().nullsLast().op("int2_ops")),
+		uniqueIndex("unq_songs_aid").using("btree", table.aid.asc().nullsLast().op("int8_ops")),
+		uniqueIndex("unq_songs_netease_id").using(
+			"btree",
+			table.neteaseId.asc().nullsLast().op("int8_ops")
+		),
+		check("songs_id_not_null", sql`NOT NULL id`),
+		check("songs_created_at_not_null", sql`NOT NULL created_at`),
+		check("songs_updated_at_not_null", sql`NOT NULL updated_at`),
+		check("songs_deleted_not_null", sql`NOT NULL deleted`)
+	]
+);
 
-export const snapshotSchedule = pgTable("snapshot_schedule", {
-	id: bigserial({ mode: "bigint" }).notNull(),
-	// You can use { mode: "bigint" } if numbers are exceeding js number limitations
-	aid: bigint({ mode: "number" }).notNull(),
-	type: text(),
-	createdAt: timestamp("created_at", { withTimezone: true, mode: 'string' }).default(sql`CURRENT_TIMESTAMP`).notNull(),
-	startedAt: timestamp("started_at", { withTimezone: true, mode: 'string' }),
-	finishedAt: timestamp("finished_at", { withTimezone: true, mode: 'string' }),
-	status: text().default('pending').notNull(),
-}, (table) => [
-	index("idx_snapshot_schedule_aid_status_type").using("btree", table.aid.asc().nullsLast().op("int8_ops"), table.status.asc().nullsLast().op("text_ops"), table.type.asc().nullsLast().op("text_ops")),
-	index("idx_snapshot_schedule_status_started_at").using("btree", table.status.asc().nullsLast().op("timestamptz_ops"), table.startedAt.asc().nullsLast().op("text_ops")),
-	uniqueIndex("snapshot_schedule_pkey").using("btree", table.id.asc().nullsLast().op("int8_ops")),
-	check("snapshot_schedule_id_not_null", sql`NOT NULL id`),
-	check("snapshot_schedule_aid_not_null", sql`NOT NULL aid`),
-	check("snapshot_schedule_created_at_not_null", sql`NOT NULL created_at`),
-	check("snapshot_schedule_status_not_null", sql`NOT NULL status`),
-]);
+export const snapshotSchedule = pgTable(
+	"snapshot_schedule",
+	{
+		id: bigserial({ mode: "bigint" }).notNull(),
+		// You can use { mode: "bigint" } if numbers are exceeding js number limitations
+		aid: bigint({ mode: "number" }).notNull(),
+		type: text(),
+		createdAt: timestamp("created_at", { withTimezone: true, mode: "string" })
+			.default(sql`CURRENT_TIMESTAMP`)
+			.notNull(),
+		startedAt: timestamp("started_at", { withTimezone: true, mode: "string" }),
+		finishedAt: timestamp("finished_at", { withTimezone: true, mode: "string" }),
+		status: text().default("pending").notNull()
+	},
+	(table) => [
+		index("idx_snapshot_schedule_aid_status_type").using(
+			"btree",
+			table.aid.asc().nullsLast().op("int8_ops"),
+			table.status.asc().nullsLast().op("text_ops"),
+			table.type.asc().nullsLast().op("text_ops")
+		),
+		index("idx_snapshot_schedule_status_started_at").using(
+			"btree",
+			table.status.asc().nullsLast().op("timestamptz_ops"),
+			table.startedAt.asc().nullsLast().op("text_ops")
+		),
+		uniqueIndex("snapshot_schedule_pkey").using(
+			"btree",
+			table.id.asc().nullsLast().op("int8_ops")
+		),
+		check("snapshot_schedule_id_not_null", sql`NOT NULL id`),
+		check("snapshot_schedule_aid_not_null", sql`NOT NULL aid`),
+		check("snapshot_schedule_created_at_not_null", sql`NOT NULL created_at`),
+		check("snapshot_schedule_status_not_null", sql`NOT NULL status`)
+	]
+);
 
-export const relationSinger = pgTable("relation_singer", {
-	id: integer().default(sql`nextval('relation_singer_id_seq'::regclass)`).primaryKey().notNull(),
-	// You can use { mode: "bigint" } if numbers are exceeding js number limitations
-	songId: bigint("song_id", { mode: "number" }).notNull(),
-	singerId: integer("singer_id").notNull(),
-	createdAt: timestamp("created_at", { withTimezone: true, mode: 'string' }).default(sql`CURRENT_TIMESTAMP`).notNull(),
-	updatedAt: timestamp("updated_at", { withTimezone: true, mode: 'string' }).default(sql`CURRENT_TIMESTAMP`).notNull(),
-}, (table) => [
-	foreignKey({
+export const relationSinger = pgTable(
+	"relation_singer",
+	{
+		id: integer()
+			.default(sql`nextval('relation_singer_id_seq'::regclass)`)
+			.primaryKey()
+			.notNull(),
+		// You can use { mode: "bigint" } if numbers are exceeding js number limitations
+		songId: bigint("song_id", { mode: "number" }).notNull(),
+		singerId: integer("singer_id").notNull(),
+		createdAt: timestamp("created_at", { withTimezone: true, mode: "string" })
+			.default(sql`CURRENT_TIMESTAMP`)
+			.notNull(),
+		updatedAt: timestamp("updated_at", { withTimezone: true, mode: "string" })
+			.default(sql`CURRENT_TIMESTAMP`)
+			.notNull()
+	},
+	(table) => [
+		foreignKey({
 			columns: [table.singerId],
 			foreignColumns: [singer.id],
 			name: "fkey_singer_id"
 		}),
-	foreignKey({
+		foreignKey({
 			columns: [table.songId],
 			foreignColumns: [songs.id],
 			name: "fkey_song_id"
 		}),
-	check("relation_singer_id_not_null", sql`NOT NULL id`),
-	check("relation_singer_song_id_not_null", sql`NOT NULL song_id`),
-	check("relation_singer_singer_id_not_null", sql`NOT NULL singer_id`),
-	check("relation_singer_created_at_not_null", sql`NOT NULL created_at`),
-	check("relation_singer_updated_at_not_null", sql`NOT NULL updated_at`),
-]);
+		check("relation_singer_id_not_null", sql`NOT NULL id`),
+		check("relation_singer_song_id_not_null", sql`NOT NULL song_id`),
+		check("relation_singer_singer_id_not_null", sql`NOT NULL singer_id`),
+		check("relation_singer_created_at_not_null", sql`NOT NULL created_at`),
+		check("relation_singer_updated_at_not_null", sql`NOT NULL updated_at`)
+	]
+);
 
-export const bilibiliUser = pgTable("bilibili_user", {
-	id: serial().primaryKey().notNull(),
-	// You can use { mode: "bigint" } if numbers are exceeding js number limitations
-	uid: bigint({ mode: "number" }).notNull(),
-	username: text().notNull(),
-	desc: text().notNull(),
-	fans: integer().notNull(),
-	createdAt: timestamp("created_at", { withTimezone: true, mode: 'string' }).default(sql`CURRENT_TIMESTAMP`).notNull(),
-	updatedAt: timestamp("updated_at", { withTimezone: true, mode: 'string' }).default(sql`CURRENT_TIMESTAMP`).notNull(),
-	avatar: text(),
-}, (table) => [
-	index("idx_bili-user_uid").using("btree", table.uid.asc().nullsLast().op("int8_ops")),
-	unique("unq_bili-user_uid").on(table.uid),
-	check("bilibili_user_id_not_null", sql`NOT NULL id`),
-	check("bilibili_user_uid_not_null", sql`NOT NULL uid`),
-	check("bilibili_user_username_not_null", sql`NOT NULL username`),
-	check("bilibili_user_desc_not_null", sql`NOT NULL "desc"`),
-	check("bilibili_user_fans_not_null", sql`NOT NULL fans`),
-	check("bilibili_user_created_at_not_null", sql`NOT NULL created_at`),
-	check("bilibili_user_updated_at_not_null", sql`NOT NULL updated_at`),
-]);
+export const bilibiliUser = pgTable(
+	"bilibili_user",
+	{
+		id: serial().primaryKey().notNull(),
+		// You can use { mode: "bigint" } if numbers are exceeding js number limitations
+		uid: bigint({ mode: "number" }).notNull(),
+		username: text().notNull(),
+		desc: text().notNull(),
+		fans: integer().notNull(),
+		createdAt: timestamp("created_at", { withTimezone: true, mode: "string" })
+			.default(sql`CURRENT_TIMESTAMP`)
+			.notNull(),
+		updatedAt: timestamp("updated_at", { withTimezone: true, mode: "string" })
+			.default(sql`CURRENT_TIMESTAMP`)
+			.notNull(),
+		avatar: text()
+	},
+	(table) => [
+		index("idx_bili-user_uid").using("btree", table.uid.asc().nullsLast().op("int8_ops")),
+		unique("unq_bili-user_uid").on(table.uid),
+		check("bilibili_user_id_not_null", sql`NOT NULL id`),
+		check("bilibili_user_uid_not_null", sql`NOT NULL uid`),
+		check("bilibili_user_username_not_null", sql`NOT NULL username`),
+		check("bilibili_user_desc_not_null", sql`NOT NULL "desc"`),
+		check("bilibili_user_fans_not_null", sql`NOT NULL fans`),
+		check("bilibili_user_created_at_not_null", sql`NOT NULL created_at`),
+		check("bilibili_user_updated_at_not_null", sql`NOT NULL updated_at`)
+	]
+);
 
-export const videoTypeLabelInInternal = internal.table("video_type_label", {
-	id: serial().primaryKey().notNull(),
-	// You can use { mode: "bigint" } if numbers are exceeding js number limitations
-	aid: bigint({ mode: "number" }).notNull(),
-	label: boolean().notNull(),
-	user: text().default('i3wW8JdZ9sT3ASkk').notNull(),
-}, (table) => [
-	foreignKey({
+export const videoTypeLabelInInternal = internal.table(
+	"video_type_label",
+	{
+		id: serial().primaryKey().notNull(),
+		// You can use { mode: "bigint" } if numbers are exceeding js number limitations
+		aid: bigint({ mode: "number" }).notNull(),
+		label: boolean().notNull(),
+		user: text().default("i3wW8JdZ9sT3ASkk").notNull()
+	},
+	(table) => [
+		foreignKey({
 			columns: [table.user],
 			foreignColumns: [usersInCredentials.unqId],
 			name: "fkey_video_type_label_user"
 		}),
-	check("video_type_label_id_not_null", sql`NOT NULL id`),
-	check("video_type_label_aid_not_null", sql`NOT NULL aid`),
-	check("video_type_label_label_not_null", sql`NOT NULL label`),
-	check("video_type_label_user_not_null", sql`NOT NULL "user"`),
-]);
+		check("video_type_label_id_not_null", sql`NOT NULL id`),
+		check("video_type_label_aid_not_null", sql`NOT NULL aid`),
+		check("video_type_label_label_not_null", sql`NOT NULL label`),
+		check("video_type_label_user_not_null", sql`NOT NULL "user"`)
+	]
+);
diff --git a/packages/core/lib/index.ts b/packages/core/lib/index.ts
index 4bf52b9..999a8bf 100644
--- a/packages/core/lib/index.ts
+++ b/packages/core/lib/index.ts
@@ -2,4 +2,4 @@ export * from "./math";
 export * from "./milestone";
 export * from "./randomID";
 export * from "./time";
-export * from "./type";
\ No newline at end of file
+export * from "./type";
diff --git a/packages/core/lib/math.ts b/packages/core/lib/math.ts
index f81bc2d..20e9b3b 100644
--- a/packages/core/lib/math.ts
+++ b/packages/core/lib/math.ts
@@ -1,3 +1,4 @@
 export const log = (value: number, base: number = 10) => Math.log(value) / Math.log(base);
 
-export const truncate = (num: number, min: number, max: number) => Math.max(min, Math.min(num, max));
+export const truncate = (num: number, min: number, max: number) =>
+	Math.max(min, Math.min(num, max));
diff --git a/packages/core/lib/type.ts b/packages/core/lib/type.ts
index c68be82..ce7e0b4 100644
--- a/packages/core/lib/type.ts
+++ b/packages/core/lib/type.ts
@@ -1 +1 @@
-export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
\ No newline at end of file
+export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
diff --git a/packages/core/net/delegate.ts b/packages/core/net/delegate.ts
index eec7f73..4a458b5 100644
--- a/packages/core/net/delegate.ts
+++ b/packages/core/net/delegate.ts
@@ -168,7 +168,10 @@ class NetworkDelegate {
 	 * - The alicloud-fc threw an error: with error code `ALICLOUD_FC_ERROR`
 	 * - The proxy type is not supported: with error code `NOT_IMPLEMENTED`
 	 */
-	async request<R>(url: string, task: string): Promise<{
+	async request<R>(
+		url: string,
+		task: string
+	): Promise<{
 		data: R;
 		time: number;
 	}> {
@@ -221,7 +224,10 @@ class NetworkDelegate {
 		return result;
 	}
 
-	private async makeRequest<R>(url: string, proxy: Proxy): Promise<{
+	private async makeRequest<R>(
+		url: string,
+		proxy: Proxy
+	): Promise<{
 		data: R;
 		time: number;
 	}> {
diff --git a/packages/core/test/netDelegate.test.ts b/packages/core/test/netDelegate.test.ts
index d531b3c..598c4bf 100644
--- a/packages/core/test/netDelegate.test.ts
+++ b/packages/core/test/netDelegate.test.ts
@@ -3,7 +3,10 @@ import { test, expect, describe } from "bun:test";
 
 describe("proxying requests", () => {
 	test("Alibaba Cloud FC", async () => {
-		const { res } = await networkDelegate.request("https://postman-echo.com/get", "test") as any;
-        expect(res.headers.referer).toBe('https://www.bilibili.com/');
+		const { res } = (await networkDelegate.request(
+			"https://postman-echo.com/get",
+			"test"
+		)) as any;
+		expect(res.headers.referer).toBe("https://www.bilibili.com/");
 	});
 });
diff --git a/packages/crawler/mq/task/collectSongs.ts b/packages/crawler/mq/task/collectSongs.ts
index 8ce4a0d..579b463 100644
--- a/packages/crawler/mq/task/collectSongs.ts
+++ b/packages/crawler/mq/task/collectSongs.ts
@@ -51,7 +51,7 @@ export async function insertIntoSongs(aid: number) {
 		)
 		ON CONFLICT DO NOTHING
 		RETURNING *
-	`
+	`;
 
 	return data;
 }
diff --git a/packages/crawler/mq/task/getVideoStats.ts b/packages/crawler/mq/task/getVideoStats.ts
index c6d02e0..b231c98 100644
--- a/packages/crawler/mq/task/getVideoStats.ts
+++ b/packages/crawler/mq/task/getVideoStats.ts
@@ -53,7 +53,7 @@ export async function takeVideoSnapshot(
 		danmakus,
 		replies,
 		aid
-	})
+	});
 
 	logger.log(`Taken snapshot for video ${aid}.`, "net", "fn:insertVideoSnapshot");
 
diff --git a/packages/palette/.vercel/project.json b/packages/palette/.vercel/project.json
index 6abfb75..438087b 100644
--- a/packages/palette/.vercel/project.json
+++ b/packages/palette/.vercel/project.json
@@ -1 +1,5 @@
-{"projectId":"prj_a2fcj6ZRTyTlllCd2rFJm7kPLEOc","orgId":"team_DiIY95BaFppaGJqqgrXYNt5O","projectName":"cvsa-theme"}
\ No newline at end of file
+{
+	"projectId": "prj_a2fcj6ZRTyTlllCd2rFJm7kPLEOc",
+	"orgId": "team_DiIY95BaFppaGJqqgrXYNt5O",
+	"projectName": "cvsa-theme"
+}
diff --git a/packages/palette/index.html b/packages/palette/index.html
index eed7c89..a297b0a 100644
--- a/packages/palette/index.html
+++ b/packages/palette/index.html
@@ -6,7 +6,10 @@
 		<title>CVSA Color Palette Generator</title>
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-		<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet" />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap"
+			rel="stylesheet"
+		/>
 	</head>
 	<body class="bg-gray-50 dark:bg-black dark:text-gray-50">
 		<div id="root"></div>
diff --git a/packages/palette/src/App.tsx b/packages/palette/src/App.tsx
index 3ca7be5..cf64564 100644
--- a/packages/palette/src/App.tsx
+++ b/packages/palette/src/App.tsx
@@ -60,16 +60,22 @@ function App() {
 	return (
 		<div className="min-h-screen my-12 sm:px-6">
 			<div className="max-w-7xl mx-auto">
-				<h1 className="text-3xl font-bold mb-8 ml-3 text-on-background">CVSA Color Palette Generator</h1>
+				<h1 className="text-3xl font-bold mb-8 ml-3 text-on-background">
+					CVSA Color Palette Generator
+				</h1>
 
 				<div className="grid grid-cols-1 md:grid-cols-2 lg:[grid-template-columns:2fr_3fr] xl:grid-cols-3 gap-8">
 					{/* Left Column - Color Picker */}
 					<div className="xl:col-span-1 sm:bg-white sm:dark:bg-zinc-800 rounded-lg shadow-sm p-3 sm:p-6">
-						<h2 className="text-xl font-semibold text-on-background mb-4">Color Selection</h2>
+						<h2 className="text-xl font-semibold text-on-background mb-4">
+							Color Selection
+						</h2>
 
 						<div className="space-y-6">
 							<div>
-								<label className="block font-bold text-on-background mb-2">OKLCH Color Picker</label>
+								<label className="block font-bold text-on-background mb-2">
+									OKLCH Color Picker
+								</label>
 								<div className="mx-3">
 									<Picker
 										className="m-3"
diff --git a/packages/palette/src/Switch.tsx b/packages/palette/src/Switch.tsx
index ce9c7c5..6faf42e 100644
--- a/packages/palette/src/Switch.tsx
+++ b/packages/palette/src/Switch.tsx
@@ -6,7 +6,13 @@ interface SwitchProps {
 	label?: string;
 }
 
-export const Switch: React.FC<SwitchProps> = ({ checked, onChange, disabled = false, className = "", label }) => {
+export const Switch: React.FC<SwitchProps> = ({
+	checked,
+	onChange,
+	disabled = false,
+	className = "",
+	label
+}) => {
 	const handleToggle = () => {
 		if (!disabled) {
 			onChange(!checked);
@@ -22,7 +28,9 @@ export const Switch: React.FC<SwitchProps> = ({ checked, onChange, disabled = fa
 				disabled={disabled}
 				className={`relative flex items-center justify-center w-12 h-6 rounded-full transition-all duration-300
                      focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 ${
-							disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:scale-105"
+							disabled
+								? "cursor-not-allowed opacity-50"
+								: "cursor-pointer hover:scale-105"
 						} ${checked ? "bg-green-500" : "bg-zinc-300 dark:bg-zinc-600"}`}
 				aria-checked={checked}
 				aria-disabled={disabled}
@@ -40,7 +48,9 @@ export const Switch: React.FC<SwitchProps> = ({ checked, onChange, disabled = fa
 			{label && (
 				<label
 					className={`text-sm font-medium ${
-						disabled ? "text-gray-400 dark:text-gray-500" : "text-gray-800 dark:text-gray-200"
+						disabled
+							? "text-gray-400 dark:text-gray-500"
+							: "text-gray-800 dark:text-gray-200"
 					}`}
 					onClick={handleToggle}
 				>
diff --git a/packages/palette/src/components/ColorBlock.tsx b/packages/palette/src/components/ColorBlock.tsx
index 7cf5e1c..20ede4d 100644
--- a/packages/palette/src/components/ColorBlock.tsx
+++ b/packages/palette/src/components/ColorBlock.tsx
@@ -26,7 +26,11 @@ export const ColorBlock = ({ baseColor, text, l, c, h }: ColorBlockProps) => {
 		if (!check) {
 			return (
 				<AnimatePresence>
-					<motion.div exit={{ opacity: 0 }} initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+					<motion.div
+						exit={{ opacity: 0 }}
+						initial={{ opacity: 0 }}
+						animate={{ opacity: 1 }}
+					>
 						<Copy size={14} strokeWidth={2.5} />
 					</motion.div>
 				</AnimatePresence>
@@ -34,7 +38,11 @@ export const ColorBlock = ({ baseColor, text, l, c, h }: ColorBlockProps) => {
 		} else {
 			return (
 				<AnimatePresence>
-					<motion.div exit={{ opacity: 0 }} initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+					<motion.div
+						exit={{ opacity: 0 }}
+						initial={{ opacity: 0 }}
+						animate={{ opacity: 1 }}
+					>
 						<Checkmark width={16} height={16} strokeWidth={14} />
 					</motion.div>
 				</AnimatePresence>
diff --git a/packages/palette/src/components/Components.tsx b/packages/palette/src/components/Components.tsx
index 14876bc..ce2d4c8 100644
--- a/packages/palette/src/components/Components.tsx
+++ b/packages/palette/src/components/Components.tsx
@@ -35,7 +35,8 @@ const Paragraph = ({ baseColor }: { baseColor: Oklch }) => {
 			style={{ backgroundColor: formatHex(tokens.background) }}
 		>
 			<p style={{ color: formatHex(tokens["body-text"]) }}>
-				《尘海绘仙缘》是洛凛于 2024 年 12 月 15 日投稿至哔哩哔哩的 Synthesizer V 中文原创歌曲, 由赤羽演唱。
+				《尘海绘仙缘》是洛凛于 2024 年 12 月 15 日投稿至哔哩哔哩的 Synthesizer
+				V 中文原创歌曲, 由赤羽演唱。
 			</p>
 		</div>
 	);
@@ -53,19 +54,28 @@ const Buttons = ({ baseColor }: { baseColor: Oklch }) => {
 		>
 			<button
 				className="w-24 cursor-pointer font-medium py-1.5 px-4 rounded-lg border-2"
-				style={{ borderColor: formatHex(tokens["border-var-3"]), color: formatHex(tokens["on-bg-var-2"]) }}
+				style={{
+					borderColor: formatHex(tokens["border-var-3"]),
+					color: formatHex(tokens["on-bg-var-2"])
+				}}
 			>
 				Cancel
 			</button>
 			<button
 				className="w-24 cursor-pointer font-medium py-2 px-4 rounded-lg"
-				style={{ backgroundColor: formatHex(tokens.primary), color: formatHex(tokens["on-primary"]) }}
+				style={{
+					backgroundColor: formatHex(tokens.primary),
+					color: formatHex(tokens["on-primary"])
+				}}
 			>
 				Confirm
 			</button>
 			<button
 				className="w-24 cursor-pointer font-medium py-2 px-4 rounded-lg"
-				style={{ backgroundColor: formatHex(tokens.error), color: formatHex(tokens["on-error"]) }}
+				style={{
+					backgroundColor: formatHex(tokens.error),
+					color: formatHex(tokens["on-error"])
+				}}
 			>
 				Delete
 			</button>
diff --git a/packages/palette/src/components/Picker/Picker.tsx b/packages/palette/src/components/Picker/Picker.tsx
index 5d583cd..b29ec3a 100644
--- a/packages/palette/src/components/Picker/Picker.tsx
+++ b/packages/palette/src/components/Picker/Picker.tsx
@@ -34,13 +34,17 @@ const Preview = ({ color, i18n }: { color: Oklch; i18n: I18nProvider }) => {
 					className="w-full h-20 mb-5 rounded-lg flex items-center justify-center 
 					border border-dashed border-gray-300 dark:border-gray-500"
 				>
-					<span className="text-gray-700 dark:text-zinc-300 text-sm text-center">{i18n("unsupported")}</span>
+					<span className="text-gray-700 dark:text-zinc-300 text-sm text-center">
+						{i18n("unsupported")}
+					</span>
 				</div>
 				<div
 					className="w-full h-20 mb-5 rounded-lg flex items-end justify-center"
 					style={{ backgroundColor: fallbackColor }}
 				>
-					<span className="text-sm mb-1 bg-black/70 text-white px-2 rounded-xl">{i18n("fallback")}</span>
+					<span className="text-sm mb-1 bg-black/70 text-white px-2 rounded-xl">
+						{i18n("fallback")}
+					</span>
 				</div>
 			</div>
 		);
@@ -59,7 +63,9 @@ const Preview = ({ color, i18n }: { color: Oklch; i18n: I18nProvider }) => {
 					className="w-full h-20 mb-5 rounded-lg flex items-end justify-center"
 					style={{ backgroundColor: hex }}
 				>
-					<span className="text-sm mb-1 bg-black/70 text-white px-2 rounded-xl">{i18n("fallback")}</span>
+					<span className="text-sm mb-1 bg-black/70 text-white px-2 rounded-xl">
+						{i18n("fallback")}
+					</span>
 				</div>
 			</div>
 		);
diff --git a/packages/palette/src/components/Picker/Slider.tsx b/packages/palette/src/components/Picker/Slider.tsx
index 21c76f4..39954cb 100644
--- a/packages/palette/src/components/Picker/Slider.tsx
+++ b/packages/palette/src/components/Picker/Slider.tsx
@@ -22,7 +22,13 @@ export const Slider = ({ useP3, channel, color, onChange, i18nProvider }: Slider
 	}, [color.l, color.c, color.h]);
 
 	const canvasRef = useRef<null | HTMLCanvasElement>(null);
-	useOklchCanvas({ channel: channel, max: maxValue[channel], canvasRef: canvasRef, color, useP3 });
+	useOklchCanvas({
+		channel: channel,
+		max: maxValue[channel],
+		canvasRef: canvasRef,
+		color,
+		useP3
+	});
 
 	const getSliderPosition = (value: number, max: number) => {
 		return (value / max) * 100;
diff --git a/packages/temp_frontend/app/components/Search.tsx b/packages/temp_frontend/app/components/Search.tsx
index 5c913e4..bb9126c 100644
--- a/packages/temp_frontend/app/components/Search.tsx
+++ b/packages/temp_frontend/app/components/Search.tsx
@@ -38,7 +38,5 @@ export function SearchBox({ query = "", setQuery, onSearch, className, ...rest }
 export function Search(props: React.ComponentProps<"div">) {
 	const [query, setQuery] = useState("");
 	let navigate = useNavigate();
-	return (
-		<SearchBox query={query} setQuery={setQuery} onSearch={() => navigate(`/search?q=${query}`)} {...props} />
-	);
+	return <SearchBox query={query} setQuery={setQuery} onSearch={() => navigate(`/search?q=${query}`)} {...props} />;
 }
diff --git a/packages/temp_frontend/app/components/SearchResults.tsx b/packages/temp_frontend/app/components/SearchResults.tsx
index 7ac66e8..026f34e 100644
--- a/packages/temp_frontend/app/components/SearchResults.tsx
+++ b/packages/temp_frontend/app/components/SearchResults.tsx
@@ -40,7 +40,7 @@ export function SearchResults({ results, query }: SearchResultsProps) {
 			</div>
 		);
 	}
-	
+
 	const SearchResultItem = ({ result }: { result: Exclude<SearchResult, null>["data"][number] }) => {
 		switch (result.type) {
 			case "song":
diff --git a/packages/temp_frontend/app/components/ui/alert-dialog.tsx b/packages/temp_frontend/app/components/ui/alert-dialog.tsx
index 646aac2..37e4b15 100644
--- a/packages/temp_frontend/app/components/ui/alert-dialog.tsx
+++ b/packages/temp_frontend/app/components/ui/alert-dialog.tsx
@@ -1,155 +1,111 @@
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
-import { cn } from "@/lib//utils"
-import { buttonVariants } from "@/components/ui//button"
+import { cn } from "@/lib//utils";
+import { buttonVariants } from "@/components/ui//button";
 
-function AlertDialog({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+	return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
 }
 
-function AlertDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
+function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+	return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
 }
 
-function AlertDialogPortal({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
+function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+	return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
 }
 
-function AlertDialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  return (
-    <AlertDialogPrimitive.Overlay
-      data-slot="alert-dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      )}
-      {...props}
-    />
-  )
+function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+	return (
+		<AlertDialogPrimitive.Overlay
+			data-slot="alert-dialog-overlay"
+			className={cn(
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
-function AlertDialogContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
-        data-slot="alert-dialog-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  )
+function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+	return (
+		<AlertDialogPortal>
+			<AlertDialogOverlay />
+			<AlertDialogPrimitive.Content
+				data-slot="alert-dialog-content"
+				className={cn(
+					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+					className,
+				)}
+				{...props}
+			/>
+		</AlertDialogPortal>
+	);
 }
 
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  )
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-dialog-header"
+			className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+			{...props}
+		/>
+	);
 }
 
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  )
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-dialog-footer"
+			className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+			{...props}
+		/>
+	);
 }
 
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      className={cn("text-lg font-semibold", className)}
-      {...props}
-    />
-  )
+function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+	return (
+		<AlertDialogPrimitive.Title
+			data-slot="alert-dialog-title"
+			className={cn("text-lg font-semibold", className)}
+			{...props}
+		/>
+	);
 }
 
 function AlertDialogDescription({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
+	return (
+		<AlertDialogPrimitive.Description
+			data-slot="alert-dialog-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
 }
 
-function AlertDialogAction({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  return (
-    <AlertDialogPrimitive.Action
-      className={cn(buttonVariants(), className)}
-      {...props}
-    />
-  )
+function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+	return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />;
 }
 
-function AlertDialogCancel({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
-  return (
-    <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({ variant: "outline" }), className)}
-      {...props}
-    />
-  )
+function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+	return <AlertDialogPrimitive.Cancel className={cn(buttonVariants({ variant: "outline" }), className)} {...props} />;
 }
 
 export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-}
+	AlertDialog,
+	AlertDialogPortal,
+	AlertDialogOverlay,
+	AlertDialogTrigger,
+	AlertDialogContent,
+	AlertDialogHeader,
+	AlertDialogFooter,
+	AlertDialogTitle,
+	AlertDialogDescription,
+	AlertDialogAction,
+	AlertDialogCancel,
+};
diff --git a/packages/temp_frontend/app/components/ui/card.tsx b/packages/temp_frontend/app/components/ui/card.tsx
index be0ded3..9899559 100644
--- a/packages/temp_frontend/app/components/ui/card.tsx
+++ b/packages/temp_frontend/app/components/ui/card.tsx
@@ -1,92 +1,59 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib//utils"
+import { cn } from "@/lib//utils";
 
 function Card({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card"
-      className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="card"
+			className={cn(
+				"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="card-header"
+			className={cn(
+				"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
-      {...props}
-    />
-  )
+	return <div data-slot="card-title" className={cn("leading-none font-semibold", className)} {...props} />;
 }
 
 function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
+	return <div data-slot="card-description" className={cn("text-muted-foreground text-sm", className)} {...props} />;
 }
 
 function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="card-action"
+			className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+			{...props}
+		/>
+	);
 }
 
 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-6", className)}
-      {...props}
-    />
-  )
+	return <div data-slot="card-content" className={cn("px-6", className)} {...props} />;
 }
 
 function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  )
+	return (
+		<div data-slot="card-footer" className={cn("flex items-center px-6 [.border-t]:pt-6", className)} {...props} />
+	);
 }
 
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
diff --git a/packages/temp_frontend/app/components/ui/chart.tsx b/packages/temp_frontend/app/components/ui/chart.tsx
index 1b1e75f..c0046b2 100644
--- a/packages/temp_frontend/app/components/ui/chart.tsx
+++ b/packages/temp_frontend/app/components/ui/chart.tsx
@@ -1,355 +1,312 @@
-import * as React from "react"
-import * as RechartsPrimitive from "recharts"
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
 
-import { cn } from "@/lib//utils"
+import { cn } from "@/lib//utils";
 
 // Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
+const THEMES = { light: "", dark: ".dark" } as const;
 
 export type ChartConfig = {
-  [k in string]: {
-    label?: React.ReactNode
-    icon?: React.ComponentType
-  } & (
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
-}
+	[k in string]: {
+		label?: React.ReactNode;
+		icon?: React.ComponentType;
+	} & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> });
+};
 
 type ChartContextProps = {
-  config: ChartConfig
-}
+	config: ChartConfig;
+};
 
-const ChartContext = React.createContext<ChartContextProps | null>(null)
+const ChartContext = React.createContext<ChartContextProps | null>(null);
 
 function useChart() {
-  const context = React.useContext(ChartContext)
+	const context = React.useContext(ChartContext);
 
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />")
-  }
+	if (!context) {
+		throw new Error("useChart must be used within a <ChartContainer />");
+	}
 
-  return context
+	return context;
 }
 
 function ChartContainer({
-  id,
-  className,
-  children,
-  config,
-  ...props
+	id,
+	className,
+	children,
+	config,
+	...props
 }: React.ComponentProps<"div"> & {
-  config: ChartConfig
-  children: React.ComponentProps<
-    typeof RechartsPrimitive.ResponsiveContainer
-  >["children"]
+	config: ChartConfig;
+	children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
 }) {
-  const uniqueId = React.useId()
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+	const uniqueId = React.useId();
+	const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
 
-  return (
-    <ChartContext.Provider value={{ config }}>
-      <div
-        data-slot="chart"
-        data-chart={chartId}
-        className={cn(
-          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
-          className
-        )}
-        {...props}
-      >
-        <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
-      </div>
-    </ChartContext.Provider>
-  )
+	return (
+		<ChartContext.Provider value={{ config }}>
+			<div
+				data-slot="chart"
+				data-chart={chartId}
+				className={cn(
+					"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+					className,
+				)}
+				{...props}
+			>
+				<ChartStyle id={chartId} config={config} />
+				<RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
+			</div>
+		</ChartContext.Provider>
+	);
 }
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([, config]) => config.theme || config.color
-  )
+	const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
 
-  if (!colorConfig.length) {
-    return null
-  }
+	if (!colorConfig.length) {
+		return null;
+	}
 
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
+	return (
+		<style
+			dangerouslySetInnerHTML={{
+				__html: Object.entries(THEMES)
+					.map(
+						([theme, prefix]) => `
 ${prefix} [data-chart=${id}] {
 ${colorConfig
-  .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color
-    return color ? `  --color-${key}: ${color};` : null
-  })
-  .join("\n")}
-}
-`
-          )
-          .join("\n"),
-      }}
-    />
-  )
+	.map(([key, itemConfig]) => {
+		const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
+		return color ? `  --color-${key}: ${color};` : null;
+	})
+	.join("\n")}
 }
+`,
+					)
+					.join("\n"),
+			}}
+		/>
+	);
+};
 
-const ChartTooltip = RechartsPrimitive.Tooltip
+const ChartTooltip = RechartsPrimitive.Tooltip;
 
 function ChartTooltipContent({
-  active,
-  payload,
-  className,
-  indicator = "dot",
-  hideLabel = false,
-  hideIndicator = false,
-  label,
-  labelFormatter,
-  labelClassName,
-  formatter,
-  color,
-  nameKey,
-  labelKey,
+	active,
+	payload,
+	className,
+	indicator = "dot",
+	hideLabel = false,
+	hideIndicator = false,
+	label,
+	labelFormatter,
+	labelClassName,
+	formatter,
+	color,
+	nameKey,
+	labelKey,
 }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-  React.ComponentProps<"div"> & {
-    hideLabel?: boolean
-    hideIndicator?: boolean
-    indicator?: "line" | "dot" | "dashed"
-    nameKey?: string
-    labelKey?: string
-  }) {
-  const { config } = useChart()
+	React.ComponentProps<"div"> & {
+		hideLabel?: boolean;
+		hideIndicator?: boolean;
+		indicator?: "line" | "dot" | "dashed";
+		nameKey?: string;
+		labelKey?: string;
+	}) {
+	const { config } = useChart();
 
-  const tooltipLabel = React.useMemo(() => {
-    if (hideLabel || !payload?.length) {
-      return null
-    }
+	const tooltipLabel = React.useMemo(() => {
+		if (hideLabel || !payload?.length) {
+			return null;
+		}
 
-    const [item] = payload
-    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
-    const itemConfig = getPayloadConfigFromPayload(config, item, key)
-    const value =
-      !labelKey && typeof label === "string"
-        ? config[label as keyof typeof config]?.label || label
-        : itemConfig?.label
+		const [item] = payload;
+		const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+		const itemConfig = getPayloadConfigFromPayload(config, item, key);
+		const value =
+			!labelKey && typeof label === "string"
+				? config[label as keyof typeof config]?.label || label
+				: itemConfig?.label;
 
-    if (labelFormatter) {
-      return (
-        <div className={cn("font-medium", labelClassName)}>
-          {labelFormatter(value, payload)}
-        </div>
-      )
-    }
+		if (labelFormatter) {
+			return <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>;
+		}
 
-    if (!value) {
-      return null
-    }
+		if (!value) {
+			return null;
+		}
 
-    return <div className={cn("font-medium", labelClassName)}>{value}</div>
-  }, [
-    label,
-    labelFormatter,
-    payload,
-    hideLabel,
-    labelClassName,
-    config,
-    labelKey,
-  ])
+		return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+	}, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
 
-  if (!active || !payload?.length) {
-    return null
-  }
+	if (!active || !payload?.length) {
+		return null;
+	}
 
-  const nestLabel = payload.length === 1 && indicator !== "dot"
+	const nestLabel = payload.length === 1 && indicator !== "dot";
 
-  return (
-    <div
-      className={cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
-        className
-      )}
-    >
-      {!nestLabel ? tooltipLabel : null}
-      <div className="grid gap-1.5">
-        {payload
-          .filter((item) => item.type !== "none")
-          .map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`
-            const itemConfig = getPayloadConfigFromPayload(config, item, key)
-            const indicatorColor = color || item.payload.fill || item.color
+	return (
+		<div
+			className={cn(
+				"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+				className,
+			)}
+		>
+			{!nestLabel ? tooltipLabel : null}
+			<div className="grid gap-1.5">
+				{payload
+					.filter((item) => item.type !== "none")
+					.map((item, index) => {
+						const key = `${nameKey || item.name || item.dataKey || "value"}`;
+						const itemConfig = getPayloadConfigFromPayload(config, item, key);
+						const indicatorColor = color || item.payload.fill || item.color;
 
-            return (
-              <div
-                key={item.dataKey}
-                className={cn(
-                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
-                  indicator === "dot" && "items-center"
-                )}
-              >
-                {formatter && item?.value !== undefined && item.name ? (
-                  formatter(item.value, item.name, item, index, item.payload)
-                ) : (
-                  <>
-                    {itemConfig?.icon ? (
-                      <itemConfig.icon />
-                    ) : (
-                      !hideIndicator && (
-                        <div
-                          className={cn(
-                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
-                            {
-                              "h-2.5 w-2.5": indicator === "dot",
-                              "w-1": indicator === "line",
-                              "w-0 border-[1.5px] border-dashed bg-transparent":
-                                indicator === "dashed",
-                              "my-0.5": nestLabel && indicator === "dashed",
-                            }
-                          )}
-                          style={
-                            {
-                              "--color-bg": indicatorColor,
-                              "--color-border": indicatorColor,
-                            } as React.CSSProperties
-                          }
-                        />
-                      )
-                    )}
-                    <div
-                      className={cn(
-                        "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center"
-                      )}
-                    >
-                      <div className="grid gap-1.5">
-                        {nestLabel ? tooltipLabel : null}
-                        <span className="text-muted-foreground">
-                          {itemConfig?.label || item.name}
-                        </span>
-                      </div>
-                      {item.value && (
-                        <span className="text-foreground font-mono font-medium tabular-nums">
-                          {item.value.toLocaleString()}
-                        </span>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            )
-          })}
-      </div>
-    </div>
-  )
+						return (
+							<div
+								key={item.dataKey}
+								className={cn(
+									"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+									indicator === "dot" && "items-center",
+								)}
+							>
+								{formatter && item?.value !== undefined && item.name ? (
+									formatter(item.value, item.name, item, index, item.payload)
+								) : (
+									<>
+										{itemConfig?.icon ? (
+											<itemConfig.icon />
+										) : (
+											!hideIndicator && (
+												<div
+													className={cn(
+														"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+														{
+															"h-2.5 w-2.5": indicator === "dot",
+															"w-1": indicator === "line",
+															"w-0 border-[1.5px] border-dashed bg-transparent":
+																indicator === "dashed",
+															"my-0.5": nestLabel && indicator === "dashed",
+														},
+													)}
+													style={
+														{
+															"--color-bg": indicatorColor,
+															"--color-border": indicatorColor,
+														} as React.CSSProperties
+													}
+												/>
+											)
+										)}
+										<div
+											className={cn(
+												"flex flex-1 justify-between leading-none",
+												nestLabel ? "items-end" : "items-center",
+											)}
+										>
+											<div className="grid gap-1.5">
+												{nestLabel ? tooltipLabel : null}
+												<span className="text-muted-foreground">
+													{itemConfig?.label || item.name}
+												</span>
+											</div>
+											{item.value && (
+												<span className="text-foreground font-mono font-medium tabular-nums">
+													{item.value.toLocaleString()}
+												</span>
+											)}
+										</div>
+									</>
+								)}
+							</div>
+						);
+					})}
+			</div>
+		</div>
+	);
 }
 
-const ChartLegend = RechartsPrimitive.Legend
+const ChartLegend = RechartsPrimitive.Legend;
 
 function ChartLegendContent({
-  className,
-  hideIcon = false,
-  payload,
-  verticalAlign = "bottom",
-  nameKey,
+	className,
+	hideIcon = false,
+	payload,
+	verticalAlign = "bottom",
+	nameKey,
 }: React.ComponentProps<"div"> &
-  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-    hideIcon?: boolean
-    nameKey?: string
-  }) {
-  const { config } = useChart()
+	Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+		hideIcon?: boolean;
+		nameKey?: string;
+	}) {
+	const { config } = useChart();
 
-  if (!payload?.length) {
-    return null
-  }
+	if (!payload?.length) {
+		return null;
+	}
 
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-center gap-4",
-        verticalAlign === "top" ? "pb-3" : "pt-3",
-        className
-      )}
-    >
-      {payload
-        .filter((item) => item.type !== "none")
-        .map((item) => {
-          const key = `${nameKey || item.dataKey || "value"}`
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+	return (
+		<div
+			className={cn(
+				"flex items-center justify-center gap-4",
+				verticalAlign === "top" ? "pb-3" : "pt-3",
+				className,
+			)}
+		>
+			{payload
+				.filter((item) => item.type !== "none")
+				.map((item) => {
+					const key = `${nameKey || item.dataKey || "value"}`;
+					const itemConfig = getPayloadConfigFromPayload(config, item, key);
 
-          return (
-            <div
-              key={item.value}
-              className={cn(
-                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
-              )}
-            >
-              {itemConfig?.icon && !hideIcon ? (
-                <itemConfig.icon />
-              ) : (
-                <div
-                  className="h-2 w-2 shrink-0 rounded-[2px]"
-                  style={{
-                    backgroundColor: item.color,
-                  }}
-                />
-              )}
-              {itemConfig?.label}
-            </div>
-          )
-        })}
-    </div>
-  )
+					return (
+						<div
+							key={item.value}
+							className={cn(
+								"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
+							)}
+						>
+							{itemConfig?.icon && !hideIcon ? (
+								<itemConfig.icon />
+							) : (
+								<div
+									className="h-2 w-2 shrink-0 rounded-[2px]"
+									style={{
+										backgroundColor: item.color,
+									}}
+								/>
+							)}
+							{itemConfig?.label}
+						</div>
+					);
+				})}
+		</div>
+	);
 }
 
 // Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(
-  config: ChartConfig,
-  payload: unknown,
-  key: string
-) {
-  if (typeof payload !== "object" || payload === null) {
-    return undefined
-  }
+function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
+	if (typeof payload !== "object" || payload === null) {
+		return undefined;
+	}
 
-  const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
-      ? payload.payload
-      : undefined
+	const payloadPayload =
+		"payload" in payload && typeof payload.payload === "object" && payload.payload !== null
+			? payload.payload
+			: undefined;
 
-  let configLabelKey: string = key
+	let configLabelKey: string = key;
 
-  if (
-    key in payload &&
-    typeof payload[key as keyof typeof payload] === "string"
-  ) {
-    configLabelKey = payload[key as keyof typeof payload] as string
-  } else if (
-    payloadPayload &&
-    key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
-  ) {
-    configLabelKey = payloadPayload[
-      key as keyof typeof payloadPayload
-    ] as string
-  }
+	if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
+		configLabelKey = payload[key as keyof typeof payload] as string;
+	} else if (
+		payloadPayload &&
+		key in payloadPayload &&
+		typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+	) {
+		configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
+	}
 
-  return configLabelKey in config
-    ? config[configLabelKey]
-    : config[key as keyof typeof config]
+	return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
 }
 
-export {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-}
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle };
diff --git a/packages/temp_frontend/app/components/ui/dialog.tsx b/packages/temp_frontend/app/components/ui/dialog.tsx
index 4e735b6..c267c79 100644
--- a/packages/temp_frontend/app/components/ui/dialog.tsx
+++ b/packages/temp_frontend/app/components/ui/dialog.tsx
@@ -1,141 +1,121 @@
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
 
-import { cn } from "@/lib//utils"
+import { cn } from "@/lib//utils";
 
-function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+	return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
-function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+	return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
-function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+	return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
-function DialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+	return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
-function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      )}
-      {...props}
-    />
-  )
+function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+	return (
+		<DialogPrimitive.Overlay
+			data-slot="dialog-overlay"
+			className={cn(
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
+	className,
+	children,
+	showCloseButton = true,
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
+	showCloseButton?: boolean;
 }) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  )
+	return (
+		<DialogPortal data-slot="dialog-portal">
+			<DialogOverlay />
+			<DialogPrimitive.Content
+				data-slot="dialog-content"
+				className={cn(
+					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				{showCloseButton && (
+					<DialogPrimitive.Close
+						data-slot="dialog-close"
+						className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+					>
+						<XIcon />
+						<span className="sr-only">Close</span>
+					</DialogPrimitive.Close>
+				)}
+			</DialogPrimitive.Content>
+		</DialogPortal>
+	);
 }
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="dialog-header"
+			className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+			{...props}
+		/>
+	);
 }
 
 function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="dialog-footer"
+			className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+			{...props}
+		/>
+	);
 }
 
-function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
-      {...props}
-    />
-  )
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+	return (
+		<DialogPrimitive.Title
+			data-slot="dialog-title"
+			className={cn("text-lg leading-none font-semibold", className)}
+			{...props}
+		/>
+	);
 }
 
-function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
+function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
+	return (
+		<DialogPrimitive.Description
+			data-slot="dialog-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
 }
 
 export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-}
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
+};
diff --git a/packages/temp_frontend/app/components/ui/label.tsx b/packages/temp_frontend/app/components/ui/label.tsx
index 1e0f8ca..e69622a 100644
--- a/packages/temp_frontend/app/components/ui/label.tsx
+++ b/packages/temp_frontend/app/components/ui/label.tsx
@@ -1,22 +1,19 @@
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
 
-import { cn } from "@/lib//utils"
+import { cn } from "@/lib//utils";
 
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+	return (
+		<LabelPrimitive.Root
+			data-slot="label"
+			className={cn(
+				"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
-export { Label }
+export { Label };
diff --git a/packages/temp_frontend/app/components/ui/progress.tsx b/packages/temp_frontend/app/components/ui/progress.tsx
index 7dbf708..269ae6c 100644
--- a/packages/temp_frontend/app/components/ui/progress.tsx
+++ b/packages/temp_frontend/app/components/ui/progress.tsx
@@ -1,29 +1,22 @@
-import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
 
-import { cn } from "@/lib//utils"
+import { cn } from "@/lib//utils";
 
-function Progress({
-  className,
-  value,
-  ...props
-}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
-  return (
-    <ProgressPrimitive.Root
-      data-slot="progress"
-      className={cn(
-        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
-        className
-      )}
-      {...props}
-    >
-      <ProgressPrimitive.Indicator
-        data-slot="progress-indicator"
-        className="bg-primary h-full w-full flex-1 transition-all"
-        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-      />
-    </ProgressPrimitive.Root>
-  )
+function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+	return (
+		<ProgressPrimitive.Root
+			data-slot="progress"
+			className={cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className)}
+			{...props}
+		>
+			<ProgressPrimitive.Indicator
+				data-slot="progress-indicator"
+				className="bg-primary h-full w-full flex-1 transition-all"
+				style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+			/>
+		</ProgressPrimitive.Root>
+	);
 }
 
-export { Progress }
+export { Progress };
diff --git a/packages/temp_frontend/app/components/ui/select.tsx b/packages/temp_frontend/app/components/ui/select.tsx
index 40ba499..b31091d 100644
--- a/packages/temp_frontend/app/components/ui/select.tsx
+++ b/packages/temp_frontend/app/components/ui/select.tsx
@@ -1,185 +1,160 @@
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 
-import { cn } from "@/lib//utils"
+import { cn } from "@/lib//utils";
 
-function Select({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />
+function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
+	return <SelectPrimitive.Root data-slot="select" {...props} />;
 }
 
-function SelectGroup({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
+	return <SelectPrimitive.Group data-slot="select-group" {...props} />;
 }
 
-function SelectValue({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
+	return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }
 
 function SelectTrigger({
-  className,
-  size = "default",
-  children,
-  ...props
+	className,
+	size = "default",
+	children,
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default"
+	size?: "sm" | "default";
 }) {
-  return (
-    <SelectPrimitive.Trigger
-      data-slot="select-trigger"
-      data-size={size}
-      className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  )
+	return (
+		<SelectPrimitive.Trigger
+			data-slot="select-trigger"
+			data-size={size}
+			className={cn(
+				"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<SelectPrimitive.Icon asChild>
+				<ChevronDownIcon className="size-4 opacity-50" />
+			</SelectPrimitive.Icon>
+		</SelectPrimitive.Trigger>
+	);
 }
 
 function SelectContent({
-  className,
-  children,
-  position = "popper",
-  align = "center",
-  ...props
+	className,
+	children,
+	position = "popper",
+	align = "center",
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.Content>) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        data-slot="select-content"
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
-          position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className
-        )}
-        position={position}
-        align={align}
-        {...props}
-      >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          className={cn(
-            "p-1",
-            position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  )
+	return (
+		<SelectPrimitive.Portal>
+			<SelectPrimitive.Content
+				data-slot="select-content"
+				className={cn(
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+					position === "popper" &&
+						"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+					className,
+				)}
+				position={position}
+				align={align}
+				{...props}
+			>
+				<SelectScrollUpButton />
+				<SelectPrimitive.Viewport
+					className={cn(
+						"p-1",
+						position === "popper" &&
+							"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+					)}
+				>
+					{children}
+				</SelectPrimitive.Viewport>
+				<SelectScrollDownButton />
+			</SelectPrimitive.Content>
+		</SelectPrimitive.Portal>
+	);
 }
 
-function SelectLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  return (
-    <SelectPrimitive.Label
-      data-slot="select-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
-      {...props}
-    />
-  )
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
+	return (
+		<SelectPrimitive.Label
+			data-slot="select-label"
+			className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+			{...props}
+		/>
+	);
 }
 
-function SelectItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  return (
-    <SelectPrimitive.Item
-      data-slot="select-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
-      )}
-      {...props}
-    >
-      <span className="absolute right-2 flex size-3.5 items-center justify-center">
-        <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  )
+function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
+	return (
+		<SelectPrimitive.Item
+			data-slot="select-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+				className,
+			)}
+			{...props}
+		>
+			<span className="absolute right-2 flex size-3.5 items-center justify-center">
+				<SelectPrimitive.ItemIndicator>
+					<CheckIcon className="size-4" />
+				</SelectPrimitive.ItemIndicator>
+			</span>
+			<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+		</SelectPrimitive.Item>
+	);
 }
 
-function SelectSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
+function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+	return (
+		<SelectPrimitive.Separator
+			data-slot="select-separator"
+			className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	);
 }
 
-function SelectScrollUpButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  return (
-    <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
-      {...props}
-    >
-      <ChevronUpIcon className="size-4" />
-    </SelectPrimitive.ScrollUpButton>
-  )
+function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+	return (
+		<SelectPrimitive.ScrollUpButton
+			data-slot="select-scroll-up-button"
+			className={cn("flex cursor-default items-center justify-center py-1", className)}
+			{...props}
+		>
+			<ChevronUpIcon className="size-4" />
+		</SelectPrimitive.ScrollUpButton>
+	);
 }
 
 function SelectScrollDownButton({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  return (
-    <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
-      {...props}
-    >
-      <ChevronDownIcon className="size-4" />
-    </SelectPrimitive.ScrollDownButton>
-  )
+	return (
+		<SelectPrimitive.ScrollDownButton
+			data-slot="select-scroll-down-button"
+			className={cn("flex cursor-default items-center justify-center py-1", className)}
+			{...props}
+		>
+			<ChevronDownIcon className="size-4" />
+		</SelectPrimitive.ScrollDownButton>
+	);
 }
 
 export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-}
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectScrollDownButton,
+	SelectScrollUpButton,
+	SelectSeparator,
+	SelectTrigger,
+	SelectValue,
+};
diff --git a/packages/temp_frontend/app/components/ui/skeleton.tsx b/packages/temp_frontend/app/components/ui/skeleton.tsx
index 16d4e12..f952c4d 100644
--- a/packages/temp_frontend/app/components/ui/skeleton.tsx
+++ b/packages/temp_frontend/app/components/ui/skeleton.tsx
@@ -1,13 +1,7 @@
-import { cn } from "@/lib//utils"
+import { cn } from "@/lib//utils";
 
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="skeleton"
-      className={cn("bg-accent animate-pulse rounded-md", className)}
-      {...props}
-    />
-  )
+	return <div data-slot="skeleton" className={cn("bg-accent animate-pulse rounded-md", className)} {...props} />;
 }
 
-export { Skeleton }
+export { Skeleton };
diff --git a/packages/temp_frontend/app/components/ui/table.tsx b/packages/temp_frontend/app/components/ui/table.tsx
index c54cec1..3ea804a 100644
--- a/packages/temp_frontend/app/components/ui/table.tsx
+++ b/packages/temp_frontend/app/components/ui/table.tsx
@@ -1,114 +1,73 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib//utils"
+import { cn } from "@/lib//utils";
 
 function Table({ className, ...props }: React.ComponentProps<"table">) {
-  return (
-    <div
-      data-slot="table-container"
-      className="relative w-full overflow-x-auto"
-    >
-      <table
-        data-slot="table"
-        className={cn("w-full caption-bottom text-sm", className)}
-        {...props}
-      />
-    </div>
-  )
+	return (
+		<div data-slot="table-container" className="relative w-full overflow-x-auto">
+			<table data-slot="table" className={cn("w-full caption-bottom text-sm", className)} {...props} />
+		</div>
+	);
 }
 
 function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
-  return (
-    <thead
-      data-slot="table-header"
-      className={cn("[&_tr]:border-b", className)}
-      {...props}
-    />
-  )
+	return <thead data-slot="table-header" className={cn("[&_tr]:border-b", className)} {...props} />;
 }
 
 function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
-  return (
-    <tbody
-      data-slot="table-body"
-      className={cn("[&_tr:last-child]:border-0", className)}
-      {...props}
-    />
-  )
+	return <tbody data-slot="table-body" className={cn("[&_tr:last-child]:border-0", className)} {...props} />;
 }
 
 function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
-  return (
-    <tfoot
-      data-slot="table-footer"
-      className={cn(
-        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<tfoot
+			data-slot="table-footer"
+			className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+			{...props}
+		/>
+	);
 }
 
 function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
-  return (
-    <tr
-      data-slot="table-row"
-      className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<tr
+			data-slot="table-row"
+			className={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className)}
+			{...props}
+		/>
+	);
 }
 
 function TableHead({ className, ...props }: React.ComponentProps<"th">) {
-  return (
-    <th
-      data-slot="table-head"
-      className={cn(
-        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<th
+			data-slot="table-head"
+			className={cn(
+				"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function TableCell({ className, ...props }: React.ComponentProps<"td">) {
-  return (
-    <td
-      data-slot="table-cell"
-      className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<td
+			data-slot="table-cell"
+			className={cn(
+				"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
-function TableCaption({
-  className,
-  ...props
-}: React.ComponentProps<"caption">) {
-  return (
-    <caption
-      data-slot="table-caption"
-      className={cn("text-muted-foreground mt-4 text-sm", className)}
-      {...props}
-    />
-  )
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
+	return (
+		<caption data-slot="table-caption" className={cn("text-muted-foreground mt-4 text-sm", className)} {...props} />
+	);
 }
 
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/packages/temp_frontend/app/root.tsx b/packages/temp_frontend/app/root.tsx
index fff7f70..1c946a4 100644
--- a/packages/temp_frontend/app/root.tsx
+++ b/packages/temp_frontend/app/root.tsx
@@ -23,7 +23,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
 			<head>
 				<meta charSet="utf-8" />
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
-				<link rel="icon" type="image/x-icon" href="/favicon.ico"/>
+				<link rel="icon" type="image/x-icon" href="/favicon.ico" />
 				<link rel="manifest" href="/site.webmanifest" />
 				<title>中V档案馆</title>
 				<Meta />
diff --git a/packages/temp_frontend/app/routes/home/MilestoneVideoCard.tsx b/packages/temp_frontend/app/routes/home/MilestoneVideoCard.tsx
index 38c7fc7..980a68f 100644
--- a/packages/temp_frontend/app/routes/home/MilestoneVideoCard.tsx
+++ b/packages/temp_frontend/app/routes/home/MilestoneVideoCard.tsx
@@ -96,9 +96,7 @@ export const MilestoneVideoCard = ({
 						发布于 {formatDateTime(new Date(video.bilibili_metadata.publishedAt))}
 					</span>
 				)}
-				<span>
-					数据更新于 {timeAgo(new Date(video.eta.updatedAt))}前
-				</span>
+				<span>数据更新于 {timeAgo(new Date(video.eta.updatedAt))}前</span>
 				<a
 					href={`https://www.bilibili.com/video/av${video.bilibili_metadata.aid}`}
 					target="_blank"
diff --git a/packages/temp_frontend/app/routes/labelling/LabelInstructions.tsx b/packages/temp_frontend/app/routes/labelling/LabelInstructions.tsx
index bcf9720..3030e55 100644
--- a/packages/temp_frontend/app/routes/labelling/LabelInstructions.tsx
+++ b/packages/temp_frontend/app/routes/labelling/LabelInstructions.tsx
@@ -42,12 +42,20 @@ export function LabelInstructions({ open, onOpenChange }: LabelInstructionsProps
 								</b>
 								<ul className="list-disc list-inside text-sm">
 									<li>对于“AI孙燕姿”一类使用RVC等技术生成的人声，请选择“否”。</li>
-									<li>对于外文歌姬（如初音未来）演唱的<b>中文歌曲</b>，请选择“是”。</li>
-									<li>对于中文歌姬（如洛天依）演唱的<b>外语歌曲</b>，请选择“是”。</li>
-									<li>对于自行制作的声库/歌姬（如自制UTAU/DiffSinger声库），只要歌词中有中文，请选择“是”。</li>
+									<li>
+										对于外文歌姬（如初音未来）演唱的<b>中文歌曲</b>，请选择“是”。
+									</li>
+									<li>
+										对于中文歌姬（如洛天依）演唱的<b>外语歌曲</b>，请选择“是”。
+									</li>
+									<li>
+										对于自行制作的声库/歌姬（如自制UTAU/DiffSinger声库），只要歌词中有中文，请选择“是”。
+									</li>
 								</ul>
 							</p>
-							<p><b>如果你无法确定，请始终选择“是”。</b></p>
+							<p>
+								<b>如果你无法确定，请始终选择“是”。</b>
+							</p>
 							<div className="bg-muted p-4 rounded-md">
 								<h4 className="font-medium mb-2">键盘快捷键</h4>
 								<ul className="list-disc list-inside text-sm text-secondary-foreground">
diff --git a/packages/temp_frontend/app/routes/labelling/VideoInfo.tsx b/packages/temp_frontend/app/routes/labelling/VideoInfo.tsx
index 5812318..907a829 100644
--- a/packages/temp_frontend/app/routes/labelling/VideoInfo.tsx
+++ b/packages/temp_frontend/app/routes/labelling/VideoInfo.tsx
@@ -7,7 +7,6 @@ const app = treaty<App>(import.meta.env.VITE_API_URL!);
 
 type VideosResponse = Awaited<ReturnType<Awaited<typeof app.videos.unlabelled>["get"]>>["data"];
 
-
 interface VideoInfoProps {
 	video: Exclude<VideosResponse, null>[number];
 }
diff --git a/packages/temp_frontend/app/routes/login.tsx b/packages/temp_frontend/app/routes/login.tsx
index 8084be2..720c227 100644
--- a/packages/temp_frontend/app/routes/login.tsx
+++ b/packages/temp_frontend/app/routes/login.tsx
@@ -36,7 +36,7 @@ export default function Login() {
 			const { data, error } = await app.auth.session.post(formData);
 
 			if (data) {
-                localStorage.setItem("sessionID", data.sessionID);
+				localStorage.setItem("sessionID", data.sessionID);
 				navigate("/", { replace: true });
 			} else {
 				setError(error?.value?.message || "登录失败");
diff --git a/packages/temp_frontend/app/routes/video/[id]/info/index.tsx b/packages/temp_frontend/app/routes/video/[id]/info/index.tsx
index 6838d90..4007933 100644
--- a/packages/temp_frontend/app/routes/video/[id]/info/index.tsx
+++ b/packages/temp_frontend/app/routes/video/[id]/info/index.tsx
@@ -88,10 +88,10 @@ export default function VideoInfo({ loaderData }: Route.ComponentProps) {
 					<p>
 						<span>发布于 {formatDateTime(new Date(videoInfo!.pubdate * 1000))}</span>
 					</p>
-                    <p>
-                        <span>播放：{(videoInfo!.stat?.view ?? 0).toLocaleString()}</span> ·{" "}
-                        <span>弹幕：{(videoInfo!.stat?.danmaku ?? 0).toLocaleString()}</span>
-                    </p>
+					<p>
+						<span>播放：{(videoInfo!.stat?.view ?? 0).toLocaleString()}</span> ·{" "}
+						<span>弹幕：{(videoInfo!.stat?.danmaku ?? 0).toLocaleString()}</span>
+					</p>
 					<p>
 						<span>
 							分区: {videoInfo!.tname}, tid{videoInfo!.tid}
@@ -105,7 +105,12 @@ export default function VideoInfo({ loaderData }: Route.ComponentProps) {
 							</>
 						)}
 					</p>
-					<p>UP主：<a className="underline" href={`https://space.bilibili.com/${videoInfo!.owner.mid}`}>{videoInfo!.owner.name}</a></p>
+					<p>
+						UP主：
+						<a className="underline" href={`https://space.bilibili.com/${videoInfo!.owner.mid}`}>
+							{videoInfo!.owner.name}
+						</a>
+					</p>
 				</div>
 			</div>
 
diff --git a/packages/temp_frontend/public/site.webmanifest b/packages/temp_frontend/public/site.webmanifest
index 45dc8a2..52a2fe3 100644
--- a/packages/temp_frontend/public/site.webmanifest
+++ b/packages/temp_frontend/public/site.webmanifest
@@ -1 +1,11 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
+{
+	"name": "",
+	"short_name": "",
+	"icons": [
+		{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+		{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+	],
+	"theme_color": "#ffffff",
+	"background_color": "#ffffff",
+	"display": "standalone"
+}
diff --git a/packages/temp_frontend/wrangler.jsonc b/packages/temp_frontend/wrangler.jsonc
index f9646d6..76f9d96 100644
--- a/packages/temp_frontend/wrangler.jsonc
+++ b/packages/temp_frontend/wrangler.jsonc
@@ -3,6 +3,6 @@
 	"compatibility_date": "2025-06-28",
 	"assets": {
 		"directory": "./build/client",
-		"not_found_handling": "single-page-application"
-	}
+		"not_found_handling": "single-page-application",
+	},
 }
diff --git a/packages/tracker/app/admin/users.tsx b/packages/tracker/app/admin/users.tsx
index 63d978d..17ca6fb 100644
--- a/packages/tracker/app/admin/users.tsx
+++ b/packages/tracker/app/admin/users.tsx
@@ -20,7 +20,15 @@ import { eq } from "drizzle-orm";
 import { hashPassword } from "@lib/auth";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger
+} from "@/components/ui/dialog";
 import { generate as generateId } from "@alikia/random-key";
 import { Checkbox } from "@/components/ui/checkbox";
 
@@ -64,10 +72,7 @@ export async function action({ request }: Route.ActionArgs) {
 			return { error: "Cannot change your own admin status" };
 		}
 
-		await db
-			.update(users)
-			.set({ isAdmin: !targetUser.isAdmin })
-			.where(eq(users.id, userId));
+		await db.update(users).set({ isAdmin: !targetUser.isAdmin }).where(eq(users.id, userId));
 
 		return { success: true };
 	}
@@ -103,7 +108,11 @@ export async function action({ request }: Route.ActionArgs) {
 		}
 
 		// Check if username already exists
-		const existingUser = await db.select().from(users).where(eq(users.username, username)).get();
+		const existingUser = await db
+			.select()
+			.from(users)
+			.where(eq(users.username, username))
+			.get();
 		if (existingUser) {
 			return { error: "Username already exists" };
 		}
@@ -136,14 +145,18 @@ export async function action({ request }: Route.ActionArgs) {
 		}
 
 		// Check if username already exists (excluding current user)
-		const existingUser = await db.select().from(users).where(eq(users.username, username)).get();
+		const existingUser = await db
+			.select()
+			.from(users)
+			.where(eq(users.username, username))
+			.get();
 		if (existingUser && existingUser.id !== userId) {
 			return { error: "Username already exists" };
 		}
 
 		const updateData: any = {
 			username,
-			isAdmin,
+			isAdmin
 		};
 
 		// Only update password if provided
@@ -151,10 +164,7 @@ export async function action({ request }: Route.ActionArgs) {
 			updateData.password = await hashPassword(password);
 		}
 
-		await db
-			.update(users)
-			.set(updateData)
-			.where(eq(users.id, userId));
+		await db.update(users).set(updateData).where(eq(users.id, userId));
 
 		return { success: true };
 	}
@@ -281,11 +291,23 @@ export default function UserManagement({ loaderData }: Route.ComponentProps) {
 														</DialogDescription>
 													</DialogHeader>
 													<Form method="post">
-														<input type="hidden" name="userId" value={user.id} />
-														<input type="hidden" name="intent" value="updateUser" />
+														<input
+															type="hidden"
+															name="userId"
+															value={user.id}
+														/>
+														<input
+															type="hidden"
+															name="intent"
+															value="updateUser"
+														/>
 														<div className="grid gap-4 py-4">
 															<div className="grid gap-2">
-																<Label htmlFor={`username-${user.id}`}>Username</Label>
+																<Label
+																	htmlFor={`username-${user.id}`}
+																>
+																	Username
+																</Label>
 																<Input
 																	id={`username-${user.id}`}
 																	name="username"
@@ -295,7 +317,11 @@ export default function UserManagement({ loaderData }: Route.ComponentProps) {
 																/>
 															</div>
 															<div className="grid gap-2">
-																<Label htmlFor={`password-${user.id}`}>New Password</Label>
+																<Label
+																	htmlFor={`password-${user.id}`}
+																>
+																	New Password
+																</Label>
 																<Input
 																	id={`password-${user.id}`}
 																	name="password"
@@ -308,25 +334,46 @@ export default function UserManagement({ loaderData }: Route.ComponentProps) {
 																	type="checkbox"
 																	id={`isAdmin-${user.id}`}
 																	name="isAdmin"
-																	defaultChecked={user.isAdmin || false}
+																	defaultChecked={
+																		user.isAdmin || false
+																	}
 																	className="rounded border-gray-300"
-																	disabled={user.id === currentUser.id}
+																	disabled={
+																		user.id === currentUser.id
+																	}
 																/>
-																<Label htmlFor={`isAdmin-${user.id}`}>Admin User</Label>
+																<Label
+																	htmlFor={`isAdmin-${user.id}`}
+																>
+																	Admin User
+																</Label>
 																{user.id === currentUser.id && (
-																	<span className="text-xs text-muted-foreground">(Cannot change your own admin status)</span>
+																	<span className="text-xs text-muted-foreground">
+																		(Cannot change your own
+																		admin status)
+																	</span>
 																)}
 															</div>
 														</div>
 														<DialogFooter>
-															<Button type="submit">Update User</Button>
+															<Button type="submit">
+																Update User
+															</Button>
 														</DialogFooter>
 													</Form>
 												</DialogContent>
 											</Dialog>
 											<Form method="post">
-												<input type="hidden" name="userId" value={user.id} />
-												<input type="hidden" name="intent" value="toggleAdmin" />
+												<input
+													type="hidden"
+													name="userId"
+													value={user.id}
+												/>
+												<input
+													type="hidden"
+													name="intent"
+													value="toggleAdmin"
+												/>
 												<Button
 													type="submit"
 													variant="outline"
@@ -342,13 +389,23 @@ export default function UserManagement({ loaderData }: Route.ComponentProps) {
 												</Button>
 											</Form>
 											<Form method="post">
-												<input type="hidden" name="userId" value={user.id} />
-												<input type="hidden" name="intent" value="deleteUser" />
+												<input
+													type="hidden"
+													name="userId"
+													value={user.id}
+												/>
+												<input
+													type="hidden"
+													name="intent"
+													value="deleteUser"
+												/>
 												<Button
 													type="submit"
 													variant="destructive"
 													size="sm"
-													disabled={user.isAdmin || user.id === currentUser.id} // Prevent deleting admin or self
+													disabled={
+														user.isAdmin || user.id === currentUser.id
+													} // Prevent deleting admin or self
 												>
 													<Trash2 className="size-4 mr-1" />
 													Delete
diff --git a/packages/tracker/app/app.css b/packages/tracker/app/app.css
index 84b9670..15a9bc6 100644
--- a/packages/tracker/app/app.css
+++ b/packages/tracker/app/app.css
@@ -173,29 +173,21 @@
 }
 
 .dark {
-	--sidebar:
-		hsl(240 5.9% 10%);
-	--sidebar-foreground:
-		hsl(240 4.8% 95.9%);
-	--sidebar-primary:
-		hsl(224.3 76.3% 48%);
-	--sidebar-primary-foreground:
-		hsl(0 0% 100%);
-	--sidebar-accent:
-		hsl(240 3.7% 15.9%);
-	--sidebar-accent-foreground:
-		hsl(240 4.8% 95.9%);
-	--sidebar-border:
-		hsl(240 3.7% 15.9%);
-	--sidebar-ring:
-		hsl(217.2 91.2% 59.8%);
+	--sidebar: hsl(240 5.9% 10%);
+	--sidebar-foreground: hsl(240 4.8% 95.9%);
+	--sidebar-primary: hsl(224.3 76.3% 48%);
+	--sidebar-primary-foreground: hsl(0 0% 100%);
+	--sidebar-accent: hsl(240 3.7% 15.9%);
+	--sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+	--sidebar-border: hsl(240 3.7% 15.9%);
+	--sidebar-ring: hsl(217.2 91.2% 59.8%);
 }
 
 @layer base {
-  * {
-    @apply border-border outline-ring/50;
+	* {
+		@apply border-border outline-ring/50;
 	}
-  body {
-    @apply bg-background text-foreground;
+	body {
+		@apply bg-background text-foreground;
 	}
 }
diff --git a/packages/tracker/app/components/project/ProjectDialog.tsx b/packages/tracker/app/components/project/ProjectDialog.tsx
index e1f4b9f..8459251 100644
--- a/packages/tracker/app/components/project/ProjectDialog.tsx
+++ b/packages/tracker/app/components/project/ProjectDialog.tsx
@@ -6,7 +6,7 @@ import {
 	DialogDescription,
 	DialogFooter,
 	DialogHeader,
-	DialogTitle,
+	DialogTitle
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -16,11 +16,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 interface ProjectDialogProps {
 	open: boolean;
 	onOpenChange: (open: boolean) => void;
-	onSubmit: (data: {
-		name: string;
-		description: string;
-		isPublic: boolean;
-	}) => void;
+	onSubmit: (data: { name: string; description: string; isPublic: boolean }) => void;
 	onDelete?: () => void;
 	initialData?: {
 		name: string;
@@ -36,7 +32,7 @@ export function ProjectDialog({
 	onSubmit,
 	onDelete,
 	initialData,
-	isEditing = false,
+	isEditing = false
 }: ProjectDialogProps) {
 	const [name, setName] = useState(initialData?.name || "");
 	const [description, setDescription] = useState(initialData?.description || "");
@@ -47,7 +43,7 @@ export function ProjectDialog({
 		onSubmit({
 			name,
 			description,
-			isPublic,
+			isPublic
 		});
 		onOpenChange(false);
 		// Reset form
@@ -71,14 +67,11 @@ export function ProjectDialog({
 			<DialogContent className="sm:max-w-[425px]">
 				<form onSubmit={handleSubmit}>
 					<DialogHeader>
-						<DialogTitle>
-							{isEditing ? "Edit Project" : "Create Project"}
-						</DialogTitle>
+						<DialogTitle>{isEditing ? "Edit Project" : "Create Project"}</DialogTitle>
 						<DialogDescription>
-							{isEditing 
-								? "Update your project details." 
-								: "Create a new project to organize your tasks."
-							}
+							{isEditing
+								? "Update your project details."
+								: "Create a new project to organize your tasks."}
 						</DialogDescription>
 					</DialogHeader>
 					<div className="grid gap-4 py-4">
@@ -135,13 +128,11 @@ export function ProjectDialog({
 							>
 								Cancel
 							</Button>
-							<Button type="submit">
-								{isEditing ? "Update" : "Create"}
-							</Button>
+							<Button type="submit">{isEditing ? "Update" : "Create"}</Button>
 						</div>
 					</DialogFooter>
 				</form>
 			</DialogContent>
 		</Dialog>
 	);
-}
\ No newline at end of file
+}
diff --git a/packages/tracker/app/components/project/UserSearch.tsx b/packages/tracker/app/components/project/UserSearch.tsx
index fab19c2..b70285c 100644
--- a/packages/tracker/app/components/project/UserSearch.tsx
+++ b/packages/tracker/app/components/project/UserSearch.tsx
@@ -13,7 +13,6 @@ import {
 } from "@/components/ui/dialog";
 import { Checkbox } from "@/components/ui/checkbox";
 
-
 export function UserSearchModal({
 	availableUsers,
 	projectId
diff --git a/packages/tracker/app/components/task/TaskForm.tsx b/packages/tracker/app/components/task/TaskForm.tsx
index 8cdd20a..6833212 100644
--- a/packages/tracker/app/components/task/TaskForm.tsx
+++ b/packages/tracker/app/components/task/TaskForm.tsx
@@ -174,7 +174,9 @@ export function TaskForm({
 					) : (
 						<div className="h-12 px-4 justify-between bg-background border rounded-md flex items-center gap-2">
 							<Flag className="w-4 h-4" />
-							<span className={`px-2 py-0.5 rounded-md text-xs font-medium ${priorityColor}`}>
+							<span
+								className={`px-2 py-0.5 rounded-md text-xs font-medium ${priorityColor}`}
+							>
 								{priorityLabel}
 							</span>
 						</div>
diff --git a/packages/tracker/app/components/ui/alert-dialog.tsx b/packages/tracker/app/components/ui/alert-dialog.tsx
index 0863e40..4816efb 100644
--- a/packages/tracker/app/components/ui/alert-dialog.tsx
+++ b/packages/tracker/app/components/ui/alert-dialog.tsx
@@ -1,157 +1,135 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-function AlertDialog({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+	return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
 }
 
 function AlertDialogTrigger({
-  ...props
+	...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
+	return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
 }
 
-function AlertDialogPortal({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
+function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+	return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
 }
 
 function AlertDialogOverlay({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  return (
-    <AlertDialogPrimitive.Overlay
-      data-slot="alert-dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<AlertDialogPrimitive.Overlay
+			data-slot="alert-dialog-overlay"
+			className={cn(
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 function AlertDialogContent({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
-        data-slot="alert-dialog-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  )
+	return (
+		<AlertDialogPortal>
+			<AlertDialogOverlay />
+			<AlertDialogPrimitive.Content
+				data-slot="alert-dialog-content"
+				className={cn(
+					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+					className
+				)}
+				{...props}
+			/>
+		</AlertDialogPortal>
+	);
 }
 
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  )
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-dialog-header"
+			className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+			{...props}
+		/>
+	);
 }
 
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  )
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-dialog-footer"
+			className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+			{...props}
+		/>
+	);
 }
 
 function AlertDialogTitle({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      className={cn("text-lg font-semibold", className)}
-      {...props}
-    />
-  )
+	return (
+		<AlertDialogPrimitive.Title
+			data-slot="alert-dialog-title"
+			className={cn("text-lg font-semibold", className)}
+			{...props}
+		/>
+	);
 }
 
 function AlertDialogDescription({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
+	return (
+		<AlertDialogPrimitive.Description
+			data-slot="alert-dialog-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
 }
 
 function AlertDialogAction({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  return (
-    <AlertDialogPrimitive.Action
-      className={cn(buttonVariants(), className)}
-      {...props}
-    />
-  )
+	return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />;
 }
 
 function AlertDialogCancel({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
-  return (
-    <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({ variant: "outline" }), className)}
-      {...props}
-    />
-  )
+	return (
+		<AlertDialogPrimitive.Cancel
+			className={cn(buttonVariants({ variant: "outline" }), className)}
+			{...props}
+		/>
+	);
 }
 
 export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-}
+	AlertDialog,
+	AlertDialogPortal,
+	AlertDialogOverlay,
+	AlertDialogTrigger,
+	AlertDialogContent,
+	AlertDialogHeader,
+	AlertDialogFooter,
+	AlertDialogTitle,
+	AlertDialogDescription,
+	AlertDialogAction,
+	AlertDialogCancel
+};
diff --git a/packages/tracker/app/components/ui/badge.tsx b/packages/tracker/app/components/ui/badge.tsx
index 0205413..dfacae6 100644
--- a/packages/tracker/app/components/ui/badge.tsx
+++ b/packages/tracker/app/components/ui/badge.tsx
@@ -1,46 +1,40 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
+	"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+	{
+		variants: {
+			variant: {
+				default:
+					"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+				secondary:
+					"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+				destructive:
+					"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+				outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+			}
+		},
+		defaultVariants: {
+			variant: "default"
+		}
+	}
+);
 
 function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span"
+	className,
+	variant,
+	asChild = false,
+	...props
+}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : "span";
 
-  return (
-    <Comp
-      data-slot="badge"
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
+	return (
+		<Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
+	);
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };
diff --git a/packages/tracker/app/components/ui/button.tsx b/packages/tracker/app/components/ui/button.tsx
index 21409a0..d82386c 100644
--- a/packages/tracker/app/components/ui/button.tsx
+++ b/packages/tracker/app/components/ui/button.tsx
@@ -1,60 +1,58 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground hover:bg-primary/90",
+				destructive:
+					"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+				outline:
+					"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+				link: "text-primary underline-offset-4 hover:underline"
+			},
+			size: {
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
+				"icon-sm": "size-8",
+				"icon-lg": "size-10"
+			}
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default"
+		}
+	}
+);
 
 function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
+	className,
+	variant,
+	size,
+	asChild = false,
+	...props
 }: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : "button"
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean;
+	}) {
+	const Comp = asChild ? Slot : "button";
 
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
+	return (
+		<Comp
+			data-slot="button"
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
 }
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/packages/tracker/app/components/ui/calendar.tsx b/packages/tracker/app/components/ui/calendar.tsx
index 5f62ae9..11d32be 100644
--- a/packages/tracker/app/components/ui/calendar.tsx
+++ b/packages/tracker/app/components/ui/calendar.tsx
@@ -1,211 +1,185 @@
-import * as React from "react"
-import {
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "lucide-react"
-import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+import * as React from "react";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
 
-import { cn } from "@/lib/utils"
-import { Button, buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
+import { Button, buttonVariants } from "@/components/ui/button";
 
 function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  captionLayout = "label",
-  buttonVariant = "ghost",
-  formatters,
-  components,
-  ...props
+	className,
+	classNames,
+	showOutsideDays = true,
+	captionLayout = "label",
+	buttonVariant = "ghost",
+	formatters,
+	components,
+	...props
 }: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+	buttonVariant?: React.ComponentProps<typeof Button>["variant"];
 }) {
-  const defaultClassNames = getDefaultClassNames()
+	const defaultClassNames = getDefaultClassNames();
 
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn(
-        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className
-      )}
-      captionLayout={captionLayout}
-      formatters={{
-        formatMonthDropdown: (date) =>
-          date.toLocaleString("default", { month: "short" }),
-        ...formatters,
-      }}
-      classNames={{
-        root: cn("w-fit", defaultClassNames.root),
-        months: cn(
-          "flex gap-4 flex-col md:flex-row relative",
-          defaultClassNames.months
-        ),
-        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
-        nav: cn(
-          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
-          defaultClassNames.nav
-        ),
-        button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
-          defaultClassNames.button_previous
-        ),
-        button_next: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
-          defaultClassNames.button_next
-        ),
-        month_caption: cn(
-          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
-          defaultClassNames.month_caption
-        ),
-        dropdowns: cn(
-          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
-          defaultClassNames.dropdowns
-        ),
-        dropdown_root: cn(
-          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
-          defaultClassNames.dropdown_root
-        ),
-        dropdown: cn(
-          "absolute bg-popover inset-0 opacity-0",
-          defaultClassNames.dropdown
-        ),
-        caption_label: cn(
-          "select-none font-medium",
-          captionLayout === "label"
-            ? "text-sm"
-            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
-          defaultClassNames.caption_label
-        ),
-        table: "w-full border-collapse",
-        weekdays: cn("flex", defaultClassNames.weekdays),
-        weekday: cn(
-          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
-          defaultClassNames.weekday
-        ),
-        week: cn("flex w-full mt-2", defaultClassNames.week),
-        week_number_header: cn(
-          "select-none w-(--cell-size)",
-          defaultClassNames.week_number_header
-        ),
-        week_number: cn(
-          "text-[0.8rem] select-none text-muted-foreground",
-          defaultClassNames.week_number
-        ),
-        day: cn(
-          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
-          defaultClassNames.day
-        ),
-        range_start: cn(
-          "rounded-l-md bg-accent",
-          defaultClassNames.range_start
-        ),
-        range_middle: cn("rounded-none", defaultClassNames.range_middle),
-        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
-        today: cn(
-          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
-          defaultClassNames.today
-        ),
-        outside: cn(
-          "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside
-        ),
-        disabled: cn(
-          "text-muted-foreground opacity-50",
-          defaultClassNames.disabled
-        ),
-        hidden: cn("invisible", defaultClassNames.hidden),
-        ...classNames,
-      }}
-      components={{
-        Root: ({ className, rootRef, ...props }) => {
-          return (
-            <div
-              data-slot="calendar"
-              ref={rootRef}
-              className={cn(className)}
-              {...props}
-            />
-          )
-        },
-        Chevron: ({ className, orientation, ...props }) => {
-          if (orientation === "left") {
-            return (
-              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
-            )
-          }
+	return (
+		<DayPicker
+			showOutsideDays={showOutsideDays}
+			className={cn(
+				"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+				String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+				String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+				className
+			)}
+			captionLayout={captionLayout}
+			formatters={{
+				formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+				...formatters
+			}}
+			classNames={{
+				root: cn("w-fit", defaultClassNames.root),
+				months: cn("flex gap-4 flex-col md:flex-row relative", defaultClassNames.months),
+				month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+				nav: cn(
+					"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+					defaultClassNames.nav
+				),
+				button_previous: cn(
+					buttonVariants({ variant: buttonVariant }),
+					"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+					defaultClassNames.button_previous
+				),
+				button_next: cn(
+					buttonVariants({ variant: buttonVariant }),
+					"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+					defaultClassNames.button_next
+				),
+				month_caption: cn(
+					"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+					defaultClassNames.month_caption
+				),
+				dropdowns: cn(
+					"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+					defaultClassNames.dropdowns
+				),
+				dropdown_root: cn(
+					"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+					defaultClassNames.dropdown_root
+				),
+				dropdown: cn("absolute bg-popover inset-0 opacity-0", defaultClassNames.dropdown),
+				caption_label: cn(
+					"select-none font-medium",
+					captionLayout === "label"
+						? "text-sm"
+						: "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+					defaultClassNames.caption_label
+				),
+				table: "w-full border-collapse",
+				weekdays: cn("flex", defaultClassNames.weekdays),
+				weekday: cn(
+					"text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+					defaultClassNames.weekday
+				),
+				week: cn("flex w-full mt-2", defaultClassNames.week),
+				week_number_header: cn(
+					"select-none w-(--cell-size)",
+					defaultClassNames.week_number_header
+				),
+				week_number: cn(
+					"text-[0.8rem] select-none text-muted-foreground",
+					defaultClassNames.week_number
+				),
+				day: cn(
+					"relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+					defaultClassNames.day
+				),
+				range_start: cn("rounded-l-md bg-accent", defaultClassNames.range_start),
+				range_middle: cn("rounded-none", defaultClassNames.range_middle),
+				range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+				today: cn(
+					"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+					defaultClassNames.today
+				),
+				outside: cn(
+					"text-muted-foreground aria-selected:text-muted-foreground",
+					defaultClassNames.outside
+				),
+				disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+				hidden: cn("invisible", defaultClassNames.hidden),
+				...classNames
+			}}
+			components={{
+				Root: ({ className, rootRef, ...props }) => {
+					return (
+						<div
+							data-slot="calendar"
+							ref={rootRef}
+							className={cn(className)}
+							{...props}
+						/>
+					);
+				},
+				Chevron: ({ className, orientation, ...props }) => {
+					if (orientation === "left") {
+						return <ChevronLeftIcon className={cn("size-4", className)} {...props} />;
+					}
 
-          if (orientation === "right") {
-            return (
-              <ChevronRightIcon
-                className={cn("size-4", className)}
-                {...props}
-              />
-            )
-          }
+					if (orientation === "right") {
+						return <ChevronRightIcon className={cn("size-4", className)} {...props} />;
+					}
 
-          return (
-            <ChevronDownIcon className={cn("size-4", className)} {...props} />
-          )
-        },
-        DayButton: CalendarDayButton,
-        WeekNumber: ({ children, ...props }) => {
-          return (
-            <td {...props}>
-              <div className="flex size-(--cell-size) items-center justify-center text-center">
-                {children}
-              </div>
-            </td>
-          )
-        },
-        ...components,
-      }}
-      {...props}
-    />
-  )
+					return <ChevronDownIcon className={cn("size-4", className)} {...props} />;
+				},
+				DayButton: CalendarDayButton,
+				WeekNumber: ({ children, ...props }) => {
+					return (
+						<td {...props}>
+							<div className="flex size-(--cell-size) items-center justify-center text-center">
+								{children}
+							</div>
+						</td>
+					);
+				},
+				...components
+			}}
+			{...props}
+		/>
+	);
 }
 
 function CalendarDayButton({
-  className,
-  day,
-  modifiers,
-  ...props
+	className,
+	day,
+	modifiers,
+	...props
 }: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames()
+	const defaultClassNames = getDefaultClassNames();
 
-  const ref = React.useRef<HTMLButtonElement>(null)
-  React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus()
-  }, [modifiers.focused])
+	const ref = React.useRef<HTMLButtonElement>(null);
+	React.useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
 
-  return (
-    <Button
-      ref={ref}
-      variant="ghost"
-      size="icon"
-      data-day={day.date.toLocaleDateString()}
-      data-selected-single={
-        modifiers.selected &&
-        !modifiers.range_start &&
-        !modifiers.range_end &&
-        !modifiers.range_middle
-      }
-      data-range-start={modifiers.range_start}
-      data-range-end={modifiers.range_end}
-      data-range-middle={modifiers.range_middle}
-      className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
-        defaultClassNames.day,
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<Button
+			ref={ref}
+			variant="ghost"
+			size="icon"
+			data-day={day.date.toLocaleDateString()}
+			data-selected-single={
+				modifiers.selected &&
+				!modifiers.range_start &&
+				!modifiers.range_end &&
+				!modifiers.range_middle
+			}
+			data-range-start={modifiers.range_start}
+			data-range-end={modifiers.range_end}
+			data-range-middle={modifiers.range_middle}
+			className={cn(
+				"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+				defaultClassNames.day,
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
-export { Calendar, CalendarDayButton }
+export { Calendar, CalendarDayButton };
diff --git a/packages/tracker/app/components/ui/card.tsx b/packages/tracker/app/components/ui/card.tsx
index 681ad98..fa5e21a 100644
--- a/packages/tracker/app/components/ui/card.tsx
+++ b/packages/tracker/app/components/ui/card.tsx
@@ -1,92 +1,78 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Card({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card"
-      className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="card"
+			className={cn(
+				"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="card-header"
+			className={cn(
+				"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="card-title"
+			className={cn("leading-none font-semibold", className)}
+			{...props}
+		/>
+	);
 }
 
 function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="card-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
 }
 
 function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="card-action"
+			className={cn(
+				"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-6", className)}
-      {...props}
-    />
-  )
+	return <div data-slot="card-content" className={cn("px-6", className)} {...props} />;
 }
 
 function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="card-footer"
+			className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+			{...props}
+		/>
+	);
 }
 
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
diff --git a/packages/tracker/app/components/ui/checkbox.tsx b/packages/tracker/app/components/ui/checkbox.tsx
index 901e29a..acdf43a 100644
--- a/packages/tracker/app/components/ui/checkbox.tsx
+++ b/packages/tracker/app/components/ui/checkbox.tsx
@@ -1,30 +1,27 @@
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { CheckIcon } from "lucide-react"
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-function Checkbox({
-  className,
-  ...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
-  return (
-    <CheckboxPrimitive.Root
-      data-slot="checkbox"
-      className={cn(
-        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-lg border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator
-        data-slot="checkbox-indicator"
-        className="grid place-content-center text-current transition-none"
-      >
-        <CheckIcon className="size-3.5" />
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  )
+function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+	return (
+		<CheckboxPrimitive.Root
+			data-slot="checkbox"
+			className={cn(
+				"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-lg border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+				className
+			)}
+			{...props}
+		>
+			<CheckboxPrimitive.Indicator
+				data-slot="checkbox-indicator"
+				className="grid place-content-center text-current transition-none"
+			>
+				<CheckIcon className="size-3.5" />
+			</CheckboxPrimitive.Indicator>
+		</CheckboxPrimitive.Root>
+	);
 }
 
-export { Checkbox }
+export { Checkbox };
diff --git a/packages/tracker/app/components/ui/dialog.tsx b/packages/tracker/app/components/ui/dialog.tsx
index 6cb123b..c706306 100644
--- a/packages/tracker/app/components/ui/dialog.tsx
+++ b/packages/tracker/app/components/ui/dialog.tsx
@@ -1,141 +1,127 @@
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+	return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
-function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+	return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
-function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+	return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
-function DialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+	return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
 function DialogOverlay({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<DialogPrimitive.Overlay
+			data-slot="dialog-overlay"
+			className={cn(
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
+	className,
+	children,
+	showCloseButton = true,
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
+	showCloseButton?: boolean;
 }) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  )
+	return (
+		<DialogPortal data-slot="dialog-portal">
+			<DialogOverlay />
+			<DialogPrimitive.Content
+				data-slot="dialog-content"
+				className={cn(
+					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+					className
+				)}
+				{...props}
+			>
+				{children}
+				{showCloseButton && (
+					<DialogPrimitive.Close
+						data-slot="dialog-close"
+						className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+					>
+						<XIcon />
+						<span className="sr-only">Close</span>
+					</DialogPrimitive.Close>
+				)}
+			</DialogPrimitive.Content>
+		</DialogPortal>
+	);
 }
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="dialog-header"
+			className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+			{...props}
+		/>
+	);
 }
 
 function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="dialog-footer"
+			className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+			{...props}
+		/>
+	);
 }
 
-function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
-      {...props}
-    />
-  )
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+	return (
+		<DialogPrimitive.Title
+			data-slot="dialog-title"
+			className={cn("text-lg leading-none font-semibold", className)}
+			{...props}
+		/>
+	);
 }
 
 function DialogDescription({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
+	return (
+		<DialogPrimitive.Description
+			data-slot="dialog-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
 }
 
 export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-}
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger
+};
diff --git a/packages/tracker/app/components/ui/input.tsx b/packages/tracker/app/components/ui/input.tsx
index 8916905..28d573d 100644
--- a/packages/tracker/app/components/ui/input.tsx
+++ b/packages/tracker/app/components/ui/input.tsx
@@ -1,21 +1,21 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<input
+			type={type}
+			data-slot="input"
+			className={cn(
+				"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+				"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+				"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
-export { Input }
+export { Input };
diff --git a/packages/tracker/app/components/ui/label.tsx b/packages/tracker/app/components/ui/label.tsx
index ef7133a..8a68b08 100644
--- a/packages/tracker/app/components/ui/label.tsx
+++ b/packages/tracker/app/components/ui/label.tsx
@@ -1,22 +1,19 @@
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+	return (
+		<LabelPrimitive.Root
+			data-slot="label"
+			className={cn(
+				"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
-export { Label }
+export { Label };
diff --git a/packages/tracker/app/components/ui/popover.tsx b/packages/tracker/app/components/ui/popover.tsx
index 01e468b..b3889a9 100644
--- a/packages/tracker/app/components/ui/popover.tsx
+++ b/packages/tracker/app/components/ui/popover.tsx
@@ -1,48 +1,42 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-function Popover({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+	return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 
-function PopoverTrigger({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+	return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
 }
 
 function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
+	className,
+	align = "center",
+	sideOffset = 4,
+	...props
 }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
-  return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-          className
-        )}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
-  )
+	return (
+		<PopoverPrimitive.Portal>
+			<PopoverPrimitive.Content
+				data-slot="popover-content"
+				align={align}
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+					className
+				)}
+				{...props}
+			/>
+		</PopoverPrimitive.Portal>
+	);
 }
 
-function PopoverAnchor({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+	return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
 }
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/packages/tracker/app/components/ui/scroll-area.tsx b/packages/tracker/app/components/ui/scroll-area.tsx
index 9376f59..72133fa 100644
--- a/packages/tracker/app/components/ui/scroll-area.tsx
+++ b/packages/tracker/app/components/ui/scroll-area.tsx
@@ -1,56 +1,54 @@
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function ScrollArea({
-  className,
-  children,
-  ...props
+	className,
+	children,
+	...props
 }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
-  return (
-    <ScrollAreaPrimitive.Root
-      data-slot="scroll-area"
-      className={cn("relative", className)}
-      {...props}
-    >
-      <ScrollAreaPrimitive.Viewport
-        data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
-      >
-        {children}
-      </ScrollAreaPrimitive.Viewport>
-      <ScrollBar />
-      <ScrollAreaPrimitive.Corner />
-    </ScrollAreaPrimitive.Root>
-  )
+	return (
+		<ScrollAreaPrimitive.Root
+			data-slot="scroll-area"
+			className={cn("relative", className)}
+			{...props}
+		>
+			<ScrollAreaPrimitive.Viewport
+				data-slot="scroll-area-viewport"
+				className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+			>
+				{children}
+			</ScrollAreaPrimitive.Viewport>
+			<ScrollBar />
+			<ScrollAreaPrimitive.Corner />
+		</ScrollAreaPrimitive.Root>
+	);
 }
 
 function ScrollBar({
-  className,
-  orientation = "vertical",
-  ...props
+	className,
+	orientation = "vertical",
+	...props
 }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
-  return (
-    <ScrollAreaPrimitive.ScrollAreaScrollbar
-      data-slot="scroll-area-scrollbar"
-      orientation={orientation}
-      className={cn(
-        "flex touch-none p-px transition-colors select-none",
-        orientation === "vertical" &&
-          "h-full w-2.5 border-l border-l-transparent",
-        orientation === "horizontal" &&
-          "h-2.5 flex-col border-t border-t-transparent",
-        className
-      )}
-      {...props}
-    >
-      <ScrollAreaPrimitive.ScrollAreaThumb
-        data-slot="scroll-area-thumb"
-        className="bg-border relative flex-1 rounded-full"
-      />
-    </ScrollAreaPrimitive.ScrollAreaScrollbar>
-  )
+	return (
+		<ScrollAreaPrimitive.ScrollAreaScrollbar
+			data-slot="scroll-area-scrollbar"
+			orientation={orientation}
+			className={cn(
+				"flex touch-none p-px transition-colors select-none",
+				orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+				orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+				className
+			)}
+			{...props}
+		>
+			<ScrollAreaPrimitive.ScrollAreaThumb
+				data-slot="scroll-area-thumb"
+				className="bg-border relative flex-1 rounded-full"
+			/>
+		</ScrollAreaPrimitive.ScrollAreaScrollbar>
+	);
 }
 
-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };
diff --git a/packages/tracker/app/components/ui/select.tsx b/packages/tracker/app/components/ui/select.tsx
index d34798f..4937277 100644
--- a/packages/tracker/app/components/ui/select.tsx
+++ b/packages/tracker/app/components/ui/select.tsx
@@ -1,185 +1,170 @@
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-function Select({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />
+function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
+	return <SelectPrimitive.Root data-slot="select" {...props} />;
 }
 
-function SelectGroup({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
+	return <SelectPrimitive.Group data-slot="select-group" {...props} />;
 }
 
-function SelectValue({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
+	return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }
 
 function SelectTrigger({
-  className,
-  size = "default",
-  children,
-  ...props
+	className,
+	size = "default",
+	children,
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default"
+	size?: "sm" | "default";
 }) {
-  return (
-    <SelectPrimitive.Trigger
-      data-slot="select-trigger"
-      data-size={size}
-      className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  )
+	return (
+		<SelectPrimitive.Trigger
+			data-slot="select-trigger"
+			data-size={size}
+			className={cn(
+				"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className
+			)}
+			{...props}
+		>
+			{children}
+			<SelectPrimitive.Icon asChild>
+				<ChevronDownIcon className="size-4 opacity-50" />
+			</SelectPrimitive.Icon>
+		</SelectPrimitive.Trigger>
+	);
 }
 
 function SelectContent({
-  className,
-  children,
-  position = "popper",
-  align = "center",
-  ...props
+	className,
+	children,
+	position = "popper",
+	align = "center",
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.Content>) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        data-slot="select-content"
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
-          position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className
-        )}
-        position={position}
-        align={align}
-        {...props}
-      >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          className={cn(
-            "p-1",
-            position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  )
+	return (
+		<SelectPrimitive.Portal>
+			<SelectPrimitive.Content
+				data-slot="select-content"
+				className={cn(
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+					position === "popper" &&
+						"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+					className
+				)}
+				position={position}
+				align={align}
+				{...props}
+			>
+				<SelectScrollUpButton />
+				<SelectPrimitive.Viewport
+					className={cn(
+						"p-1",
+						position === "popper" &&
+							"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+					)}
+				>
+					{children}
+				</SelectPrimitive.Viewport>
+				<SelectScrollDownButton />
+			</SelectPrimitive.Content>
+		</SelectPrimitive.Portal>
+	);
 }
 
-function SelectLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  return (
-    <SelectPrimitive.Label
-      data-slot="select-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
-      {...props}
-    />
-  )
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
+	return (
+		<SelectPrimitive.Label
+			data-slot="select-label"
+			className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+			{...props}
+		/>
+	);
 }
 
 function SelectItem({
-  className,
-  children,
-  ...props
+	className,
+	children,
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  return (
-    <SelectPrimitive.Item
-      data-slot="select-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
-      )}
-      {...props}
-    >
-      <span className="absolute right-2 flex size-3.5 items-center justify-center">
-        <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  )
+	return (
+		<SelectPrimitive.Item
+			data-slot="select-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+				className
+			)}
+			{...props}
+		>
+			<span className="absolute right-2 flex size-3.5 items-center justify-center">
+				<SelectPrimitive.ItemIndicator>
+					<CheckIcon className="size-4" />
+				</SelectPrimitive.ItemIndicator>
+			</span>
+			<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+		</SelectPrimitive.Item>
+	);
 }
 
 function SelectSeparator({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
+	return (
+		<SelectPrimitive.Separator
+			data-slot="select-separator"
+			className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	);
 }
 
 function SelectScrollUpButton({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  return (
-    <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
-      {...props}
-    >
-      <ChevronUpIcon className="size-4" />
-    </SelectPrimitive.ScrollUpButton>
-  )
+	return (
+		<SelectPrimitive.ScrollUpButton
+			data-slot="select-scroll-up-button"
+			className={cn("flex cursor-default items-center justify-center py-1", className)}
+			{...props}
+		>
+			<ChevronUpIcon className="size-4" />
+		</SelectPrimitive.ScrollUpButton>
+	);
 }
 
 function SelectScrollDownButton({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  return (
-    <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
-      {...props}
-    >
-      <ChevronDownIcon className="size-4" />
-    </SelectPrimitive.ScrollDownButton>
-  )
+	return (
+		<SelectPrimitive.ScrollDownButton
+			data-slot="select-scroll-down-button"
+			className={cn("flex cursor-default items-center justify-center py-1", className)}
+			{...props}
+		>
+			<ChevronDownIcon className="size-4" />
+		</SelectPrimitive.ScrollDownButton>
+	);
 }
 
 export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-}
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectScrollDownButton,
+	SelectScrollUpButton,
+	SelectSeparator,
+	SelectTrigger,
+	SelectValue
+};
diff --git a/packages/tracker/app/components/ui/separator.tsx b/packages/tracker/app/components/ui/separator.tsx
index 275381c..74a800d 100644
--- a/packages/tracker/app/components/ui/separator.tsx
+++ b/packages/tracker/app/components/ui/separator.tsx
@@ -1,28 +1,28 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
+	className,
+	orientation = "horizontal",
+	decorative = true,
+	...props
 }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
-  return (
-    <SeparatorPrimitive.Root
-      data-slot="separator"
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<SeparatorPrimitive.Root
+			data-slot="separator"
+			decorative={decorative}
+			orientation={orientation}
+			className={cn(
+				"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
-export { Separator }
+export { Separator };
diff --git a/packages/tracker/app/components/ui/sheet.tsx b/packages/tracker/app/components/ui/sheet.tsx
index 6906f5b..780938c 100644
--- a/packages/tracker/app/components/ui/sheet.tsx
+++ b/packages/tracker/app/components/ui/sheet.tsx
@@ -1,137 +1,128 @@
-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+	return <SheetPrimitive.Root data-slot="sheet" {...props} />;
 }
 
-function SheetTrigger({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+	return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
 }
 
-function SheetClose({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
+	return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
 }
 
-function SheetPortal({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+	return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
 }
 
 function SheetOverlay({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
-  return (
-    <SheetPrimitive.Overlay
-      data-slot="sheet-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<SheetPrimitive.Overlay
+			data-slot="sheet-overlay"
+			className={cn(
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 function SheetContent({
-  className,
-  children,
-  side = "right",
-  ...props
+	className,
+	children,
+	side = "right",
+	...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  side?: "top" | "right" | "bottom" | "left"
+	side?: "top" | "right" | "bottom" | "left";
 }) {
-  return (
-    <SheetPortal>
-      <SheetOverlay />
-      <SheetPrimitive.Content
-        data-slot="sheet-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-          side === "right" &&
-            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
-          side === "left" &&
-            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
-          side === "top" &&
-            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
-          side === "bottom" &&
-            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
-          <XIcon className="size-4" />
-          <span className="sr-only">Close</span>
-        </SheetPrimitive.Close>
-      </SheetPrimitive.Content>
-    </SheetPortal>
-  )
+	return (
+		<SheetPortal>
+			<SheetOverlay />
+			<SheetPrimitive.Content
+				data-slot="sheet-content"
+				className={cn(
+					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+					side === "right" &&
+						"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+					side === "left" &&
+						"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+					side === "top" &&
+						"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+					side === "bottom" &&
+						"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+					className
+				)}
+				{...props}
+			>
+				{children}
+				<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+					<XIcon className="size-4" />
+					<span className="sr-only">Close</span>
+				</SheetPrimitive.Close>
+			</SheetPrimitive.Content>
+		</SheetPortal>
+	);
 }
 
 function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sheet-header"
-      className={cn("flex flex-col gap-1.5 p-4", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="sheet-header"
+			className={cn("flex flex-col gap-1.5 p-4", className)}
+			{...props}
+		/>
+	);
 }
 
 function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sheet-footer"
-      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="sheet-footer"
+			className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+			{...props}
+		/>
+	);
 }
 
-function SheetTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Title>) {
-  return (
-    <SheetPrimitive.Title
-      data-slot="sheet-title"
-      className={cn("text-foreground font-semibold", className)}
-      {...props}
-    />
-  )
+function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
+	return (
+		<SheetPrimitive.Title
+			data-slot="sheet-title"
+			className={cn("text-foreground font-semibold", className)}
+			{...props}
+		/>
+	);
 }
 
 function SheetDescription({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof SheetPrimitive.Description>) {
-  return (
-    <SheetPrimitive.Description
-      data-slot="sheet-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
+	return (
+		<SheetPrimitive.Description
+			data-slot="sheet-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
 }
 
 export {
-  Sheet,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-}
+	Sheet,
+	SheetTrigger,
+	SheetClose,
+	SheetContent,
+	SheetHeader,
+	SheetFooter,
+	SheetTitle,
+	SheetDescription
+};
diff --git a/packages/tracker/app/components/ui/sidebar.tsx b/packages/tracker/app/components/ui/sidebar.tsx
index 9c706c5..22fc8f5 100644
--- a/packages/tracker/app/components/ui/sidebar.tsx
+++ b/packages/tracker/app/components/ui/sidebar.tsx
@@ -1,724 +1,694 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-import { PanelLeftIcon } from "lucide-react"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { PanelLeftIcon } from "lucide-react";
 
-import { useIsMobile } from "@/hooks/use-mobile"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Separator } from "@/components/ui/separator"
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
 import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from "@/components/ui/sheet"
-import { Skeleton } from "@/components/ui/skeleton"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
+	Sheet,
+	SheetContent,
+	SheetDescription,
+	SheetHeader,
+	SheetTitle
+} from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
-const SIDEBAR_COOKIE_NAME = "sidebar_state"
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = "16rem"
-const SIDEBAR_WIDTH_MOBILE = "18rem"
-const SIDEBAR_WIDTH_ICON = "3rem"
-const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 
 type SidebarContextProps = {
-  state: "expanded" | "collapsed"
-  open: boolean
-  setOpen: (open: boolean) => void
-  openMobile: boolean
-  setOpenMobile: (open: boolean) => void
-  isMobile: boolean
-  toggleSidebar: () => void
-}
+	state: "expanded" | "collapsed";
+	open: boolean;
+	setOpen: (open: boolean) => void;
+	openMobile: boolean;
+	setOpenMobile: (open: boolean) => void;
+	isMobile: boolean;
+	toggleSidebar: () => void;
+};
 
-const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
 
 function useSidebar() {
-  const context = React.useContext(SidebarContext)
-  if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.")
-  }
+	const context = React.useContext(SidebarContext);
+	if (!context) {
+		throw new Error("useSidebar must be used within a SidebarProvider.");
+	}
 
-  return context
+	return context;
 }
 
 function SidebarProvider({
-  defaultOpen = true,
-  open: openProp,
-  onOpenChange: setOpenProp,
-  className,
-  style,
-  children,
-  ...props
+	defaultOpen = true,
+	open: openProp,
+	onOpenChange: setOpenProp,
+	className,
+	style,
+	children,
+	...props
 }: React.ComponentProps<"div"> & {
-  defaultOpen?: boolean
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
+	defaultOpen?: boolean;
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
 }) {
-  const isMobile = useIsMobile()
-  const [openMobile, setOpenMobile] = React.useState(false)
+	const isMobile = useIsMobile();
+	const [openMobile, setOpenMobile] = React.useState(false);
 
-  // This is the internal state of the sidebar.
-  // We use openProp and setOpenProp for control from outside the component.
-  const [_open, _setOpen] = React.useState(defaultOpen)
-  const open = openProp ?? _open
-  const setOpen = React.useCallback(
-    (value: boolean | ((value: boolean) => boolean)) => {
-      const openState = typeof value === "function" ? value(open) : value
-      if (setOpenProp) {
-        setOpenProp(openState)
-      } else {
-        _setOpen(openState)
-      }
+	// This is the internal state of the sidebar.
+	// We use openProp and setOpenProp for control from outside the component.
+	const [_open, _setOpen] = React.useState(defaultOpen);
+	const open = openProp ?? _open;
+	const setOpen = React.useCallback(
+		(value: boolean | ((value: boolean) => boolean)) => {
+			const openState = typeof value === "function" ? value(open) : value;
+			if (setOpenProp) {
+				setOpenProp(openState);
+			} else {
+				_setOpen(openState);
+			}
 
-      // This sets the cookie to keep the sidebar state.
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
-    },
-    [setOpenProp, open]
-  )
+			// This sets the cookie to keep the sidebar state.
+			document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+		},
+		[setOpenProp, open]
+	);
 
-  // Helper to toggle the sidebar.
-  const toggleSidebar = React.useCallback(() => {
-    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
-  }, [isMobile, setOpen, setOpenMobile])
+	// Helper to toggle the sidebar.
+	const toggleSidebar = React.useCallback(() => {
+		return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+	}, [isMobile, setOpen, setOpenMobile]);
 
-  // Adds a keyboard shortcut to toggle the sidebar.
-  React.useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (
-        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-        (event.metaKey || event.ctrlKey)
-      ) {
-        event.preventDefault()
-        toggleSidebar()
-      }
-    }
+	// Adds a keyboard shortcut to toggle the sidebar.
+	React.useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+				event.preventDefault();
+				toggleSidebar();
+			}
+		};
 
-    window.addEventListener("keydown", handleKeyDown)
-    return () => window.removeEventListener("keydown", handleKeyDown)
-  }, [toggleSidebar])
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [toggleSidebar]);
 
-  // We add a state so that we can do data-state="expanded" or "collapsed".
-  // This makes it easier to style the sidebar with Tailwind classes.
-  const state = open ? "expanded" : "collapsed"
+	// We add a state so that we can do data-state="expanded" or "collapsed".
+	// This makes it easier to style the sidebar with Tailwind classes.
+	const state = open ? "expanded" : "collapsed";
 
-  const contextValue = React.useMemo<SidebarContextProps>(
-    () => ({
-      state,
-      open,
-      setOpen,
-      isMobile,
-      openMobile,
-      setOpenMobile,
-      toggleSidebar,
-    }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-  )
+	const contextValue = React.useMemo<SidebarContextProps>(
+		() => ({
+			state,
+			open,
+			setOpen,
+			isMobile,
+			openMobile,
+			setOpenMobile,
+			toggleSidebar
+		}),
+		[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+	);
 
-  return (
-    <SidebarContext.Provider value={contextValue}>
-      <TooltipProvider delayDuration={0}>
-        <div
-          data-slot="sidebar-wrapper"
-          style={
-            {
-              "--sidebar-width": SIDEBAR_WIDTH,
-              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-              ...style,
-            } as React.CSSProperties
-          }
-          className={cn(
-            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
-            className
-          )}
-          {...props}
-        >
-          {children}
-        </div>
-      </TooltipProvider>
-    </SidebarContext.Provider>
-  )
+	return (
+		<SidebarContext.Provider value={contextValue}>
+			<TooltipProvider delayDuration={0}>
+				<div
+					data-slot="sidebar-wrapper"
+					style={
+						{
+							"--sidebar-width": SIDEBAR_WIDTH,
+							"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+							...style
+						} as React.CSSProperties
+					}
+					className={cn(
+						"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+						className
+					)}
+					{...props}
+				>
+					{children}
+				</div>
+			</TooltipProvider>
+		</SidebarContext.Provider>
+	);
 }
 
 function Sidebar({
-  side = "left",
-  variant = "sidebar",
-  collapsible = "offcanvas",
-  className,
-  children,
-  ...props
+	side = "left",
+	variant = "sidebar",
+	collapsible = "offcanvas",
+	className,
+	children,
+	...props
 }: React.ComponentProps<"div"> & {
-  side?: "left" | "right"
-  variant?: "sidebar" | "floating" | "inset"
-  collapsible?: "offcanvas" | "icon" | "none"
+	side?: "left" | "right";
+	variant?: "sidebar" | "floating" | "inset";
+	collapsible?: "offcanvas" | "icon" | "none";
 }) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+	const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 
-  if (collapsible === "none") {
-    return (
-      <div
-        data-slot="sidebar"
-        className={cn(
-          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    )
-  }
+	if (collapsible === "none") {
+		return (
+			<div
+				data-slot="sidebar"
+				className={cn(
+					"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+					className
+				)}
+				{...props}
+			>
+				{children}
+			</div>
+		);
+	}
 
-  if (isMobile) {
-    return (
-      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
-        <SheetContent
-          data-sidebar="sidebar"
-          data-slot="sidebar"
-          data-mobile="true"
-          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
-          style={
-            {
-              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-            } as React.CSSProperties
-          }
-          side={side}
-        >
-          <SheetHeader className="sr-only">
-            <SheetTitle>Sidebar</SheetTitle>
-            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
-          </SheetHeader>
-          <div className="flex h-full w-full flex-col">{children}</div>
-        </SheetContent>
-      </Sheet>
-    )
-  }
+	if (isMobile) {
+		return (
+			<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+				<SheetContent
+					data-sidebar="sidebar"
+					data-slot="sidebar"
+					data-mobile="true"
+					className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+					style={
+						{
+							"--sidebar-width": SIDEBAR_WIDTH_MOBILE
+						} as React.CSSProperties
+					}
+					side={side}
+				>
+					<SheetHeader className="sr-only">
+						<SheetTitle>Sidebar</SheetTitle>
+						<SheetDescription>Displays the mobile sidebar.</SheetDescription>
+					</SheetHeader>
+					<div className="flex h-full w-full flex-col">{children}</div>
+				</SheetContent>
+			</Sheet>
+		);
+	}
 
-  return (
-    <div
-      className="group peer text-sidebar-foreground hidden md:block"
-      data-state={state}
-      data-collapsible={state === "collapsed" ? collapsible : ""}
-      data-variant={variant}
-      data-side={side}
-      data-slot="sidebar"
-    >
-      {/* This is what handles the sidebar gap on desktop */}
-      <div
-        data-slot="sidebar-gap"
-        className={cn(
-          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
-          "group-data-[collapsible=offcanvas]:w-0",
-          "group-data-[side=right]:rotate-180",
-          variant === "floating" || variant === "inset"
-            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
-        )}
-      />
-      <div
-        data-slot="sidebar-container"
-        className={cn(
-          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
-          side === "left"
-            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-          // Adjust the padding for floating and inset variants.
-          variant === "floating" || variant === "inset"
-            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
-          className
-        )}
-        {...props}
-      >
-        <div
-          data-sidebar="sidebar"
-          data-slot="sidebar-inner"
-          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
-        >
-          {children}
-        </div>
-      </div>
-    </div>
-  )
+	return (
+		<div
+			className="group peer text-sidebar-foreground hidden md:block"
+			data-state={state}
+			data-collapsible={state === "collapsed" ? collapsible : ""}
+			data-variant={variant}
+			data-side={side}
+			data-slot="sidebar"
+		>
+			{/* This is what handles the sidebar gap on desktop */}
+			<div
+				data-slot="sidebar-gap"
+				className={cn(
+					"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+					"group-data-[collapsible=offcanvas]:w-0",
+					"group-data-[side=right]:rotate-180",
+					variant === "floating" || variant === "inset"
+						? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+						: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+				)}
+			/>
+			<div
+				data-slot="sidebar-container"
+				className={cn(
+					"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+					side === "left"
+						? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+						: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+					// Adjust the padding for floating and inset variants.
+					variant === "floating" || variant === "inset"
+						? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+						: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+					className
+				)}
+				{...props}
+			>
+				<div
+					data-sidebar="sidebar"
+					data-slot="sidebar-inner"
+					className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+				>
+					{children}
+				</div>
+			</div>
+		</div>
+	);
 }
 
-function SidebarTrigger({
-  className,
-  onClick,
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  const { toggleSidebar } = useSidebar()
+function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {
+	const { toggleSidebar } = useSidebar();
 
-  return (
-    <Button
-      data-sidebar="trigger"
-      data-slot="sidebar-trigger"
-      variant="ghost"
-      size="icon"
-      className={cn("size-7", className)}
-      onClick={(event) => {
-        onClick?.(event)
-        toggleSidebar()
-      }}
-      {...props}
-    >
-      <PanelLeftIcon />
-      <span className="sr-only">Toggle Sidebar</span>
-    </Button>
-  )
+	return (
+		<Button
+			data-sidebar="trigger"
+			data-slot="sidebar-trigger"
+			variant="ghost"
+			size="icon"
+			className={cn("size-7", className)}
+			onClick={(event) => {
+				onClick?.(event);
+				toggleSidebar();
+			}}
+			{...props}
+		>
+			<PanelLeftIcon />
+			<span className="sr-only">Toggle Sidebar</span>
+		</Button>
+	);
 }
 
 function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
-  const { toggleSidebar } = useSidebar()
+	const { toggleSidebar } = useSidebar();
 
-  return (
-    <button
-      data-sidebar="rail"
-      data-slot="sidebar-rail"
-      aria-label="Toggle Sidebar"
-      tabIndex={-1}
-      onClick={toggleSidebar}
-      title="Toggle Sidebar"
-      className={cn(
-        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
-        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<button
+			data-sidebar="rail"
+			data-slot="sidebar-rail"
+			aria-label="Toggle Sidebar"
+			tabIndex={-1}
+			onClick={toggleSidebar}
+			title="Toggle Sidebar"
+			className={cn(
+				"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+				"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+				"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+				"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+				"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+				"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
-  return (
-    <main
-      data-slot="sidebar-inset"
-      className={cn(
-        "bg-background relative flex w-full flex-1 flex-col",
-        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<main
+			data-slot="sidebar-inset"
+			className={cn(
+				"bg-background relative flex w-full flex-1 flex-col",
+				"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
-function SidebarInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof Input>) {
-  return (
-    <Input
-      data-slot="sidebar-input"
-      data-sidebar="input"
-      className={cn("bg-background h-8 w-full shadow-none", className)}
-      {...props}
-    />
-  )
+function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {
+	return (
+		<Input
+			data-slot="sidebar-input"
+			data-sidebar="input"
+			className={cn("bg-background h-8 w-full shadow-none", className)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-header"
-      data-sidebar="header"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="sidebar-header"
+			data-sidebar="header"
+			className={cn("flex flex-col gap-2 p-2", className)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-footer"
-      data-sidebar="footer"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="sidebar-footer"
+			data-sidebar="footer"
+			className={cn("flex flex-col gap-2 p-2", className)}
+			{...props}
+		/>
+	);
 }
 
-function SidebarSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator>) {
-  return (
-    <Separator
-      data-slot="sidebar-separator"
-      data-sidebar="separator"
-      className={cn("bg-sidebar-border mx-2 w-auto", className)}
-      {...props}
-    />
-  )
+function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
+	return (
+		<Separator
+			data-slot="sidebar-separator"
+			data-sidebar="separator"
+			className={cn("bg-sidebar-border mx-2 w-auto", className)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-content"
-      data-sidebar="content"
-      className={cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="sidebar-content"
+			data-sidebar="content"
+			className={cn(
+				"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-group"
-      data-sidebar="group"
-      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="sidebar-group"
+			data-sidebar="group"
+			className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarGroupLabel({
-  className,
-  asChild = false,
-  ...props
+	className,
+	asChild = false,
+	...props
 }: React.ComponentProps<"div"> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "div"
+	const Comp = asChild ? Slot : "div";
 
-  return (
-    <Comp
-      data-slot="sidebar-group-label"
-      data-sidebar="group-label"
-      className={cn(
-        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<Comp
+			data-slot="sidebar-group-label"
+			data-sidebar="group-label"
+			className={cn(
+				"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarGroupAction({
-  className,
-  asChild = false,
-  ...props
+	className,
+	asChild = false,
+	...props
 }: React.ComponentProps<"button"> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "button"
+	const Comp = asChild ? Slot : "button";
 
-  return (
-    <Comp
-      data-slot="sidebar-group-action"
-      data-sidebar="group-action"
-      className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 md:after:hidden",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<Comp
+			data-slot="sidebar-group-action"
+			data-sidebar="group-action"
+			className={cn(
+				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				// Increases the hit area of the button on mobile.
+				"after:absolute after:-inset-2 md:after:hidden",
+				"group-data-[collapsible=icon]:hidden",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
-function SidebarGroupContent({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-group-content"
-      data-sidebar="group-content"
-      className={cn("w-full text-sm", className)}
-      {...props}
-    />
-  )
+function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-group-content"
+			data-sidebar="group-content"
+			className={cn("w-full text-sm", className)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
-  return (
-    <ul
-      data-slot="sidebar-menu"
-      data-sidebar="menu"
-      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
-      {...props}
-    />
-  )
+	return (
+		<ul
+			data-slot="sidebar-menu"
+			data-sidebar="menu"
+			className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="sidebar-menu-item"
-      data-sidebar="menu-item"
-      className={cn("group/menu-item relative", className)}
-      {...props}
-    />
-  )
+	return (
+		<li
+			data-slot="sidebar-menu-item"
+			data-sidebar="menu-item"
+			className={cn("group/menu-item relative", className)}
+			{...props}
+		/>
+	);
 }
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline:
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
-      },
-      size: {
-        default: "h-8 text-sm",
-        sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
+	"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+				outline:
+					"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
+			},
+			size: {
+				default: "h-8 text-sm",
+				sm: "h-7 text-xs",
+				lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
+			}
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default"
+		}
+	}
+);
 
 function SidebarMenuButton({
-  asChild = false,
-  isActive = false,
-  variant = "default",
-  size = "default",
-  tooltip,
-  className,
-  ...props
+	asChild = false,
+	isActive = false,
+	variant = "default",
+	size = "default",
+	tooltip,
+	className,
+	...props
 }: React.ComponentProps<"button"> & {
-  asChild?: boolean
-  isActive?: boolean
-  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+	asChild?: boolean;
+	isActive?: boolean;
+	tooltip?: string | React.ComponentProps<typeof TooltipContent>;
 } & VariantProps<typeof sidebarMenuButtonVariants>) {
-  const Comp = asChild ? Slot : "button"
-  const { isMobile, state } = useSidebar()
+	const Comp = asChild ? Slot : "button";
+	const { isMobile, state } = useSidebar();
 
-  const button = (
-    <Comp
-      data-slot="sidebar-menu-button"
-      data-sidebar="menu-button"
-      data-size={size}
-      data-active={isActive}
-      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
-      {...props}
-    />
-  )
+	const button = (
+		<Comp
+			data-slot="sidebar-menu-button"
+			data-sidebar="menu-button"
+			data-size={size}
+			data-active={isActive}
+			className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+			{...props}
+		/>
+	);
 
-  if (!tooltip) {
-    return button
-  }
+	if (!tooltip) {
+		return button;
+	}
 
-  if (typeof tooltip === "string") {
-    tooltip = {
-      children: tooltip,
-    }
-  }
+	if (typeof tooltip === "string") {
+		tooltip = {
+			children: tooltip
+		};
+	}
 
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>{button}</TooltipTrigger>
-      <TooltipContent
-        side="right"
-        align="center"
-        hidden={state !== "collapsed" || isMobile}
-        {...tooltip}
-      />
-    </Tooltip>
-  )
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>{button}</TooltipTrigger>
+			<TooltipContent
+				side="right"
+				align="center"
+				hidden={state !== "collapsed" || isMobile}
+				{...tooltip}
+			/>
+		</Tooltip>
+	);
 }
 
 function SidebarMenuAction({
-  className,
-  asChild = false,
-  showOnHover = false,
-  ...props
+	className,
+	asChild = false,
+	showOnHover = false,
+	...props
 }: React.ComponentProps<"button"> & {
-  asChild?: boolean
-  showOnHover?: boolean
+	asChild?: boolean;
+	showOnHover?: boolean;
 }) {
-  const Comp = asChild ? Slot : "button"
+	const Comp = asChild ? Slot : "button";
 
-  return (
-    <Comp
-      data-slot="sidebar-menu-action"
-      data-sidebar="menu-action"
-      className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 md:after:hidden",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
-        showOnHover &&
-          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<Comp
+			data-slot="sidebar-menu-action"
+			data-sidebar="menu-action"
+			className={cn(
+				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				// Increases the hit area of the button on mobile.
+				"after:absolute after:-inset-2 md:after:hidden",
+				"peer-data-[size=sm]/menu-button:top-1",
+				"peer-data-[size=default]/menu-button:top-1.5",
+				"peer-data-[size=lg]/menu-button:top-2.5",
+				"group-data-[collapsible=icon]:hidden",
+				showOnHover &&
+					"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
-function SidebarMenuBadge({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-menu-badge"
-      data-sidebar="menu-badge"
-      className={cn(
-        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
-        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
+function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-menu-badge"
+			data-sidebar="menu-badge"
+			className={cn(
+				"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+				"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+				"peer-data-[size=sm]/menu-button:top-1",
+				"peer-data-[size=default]/menu-button:top-1.5",
+				"peer-data-[size=lg]/menu-button:top-2.5",
+				"group-data-[collapsible=icon]:hidden",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarMenuSkeleton({
-  className,
-  showIcon = false,
-  ...props
+	className,
+	showIcon = false,
+	...props
 }: React.ComponentProps<"div"> & {
-  showIcon?: boolean
+	showIcon?: boolean;
 }) {
-  // Random width between 50 to 90%.
-  const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`
-  }, [])
+	// Random width between 50 to 90%.
+	const width = React.useMemo(() => {
+		return `${Math.floor(Math.random() * 40) + 50}%`;
+	}, []);
 
-  return (
-    <div
-      data-slot="sidebar-menu-skeleton"
-      data-sidebar="menu-skeleton"
-      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
-      {...props}
-    >
-      {showIcon && (
-        <Skeleton
-          className="size-4 rounded-md"
-          data-sidebar="menu-skeleton-icon"
-        />
-      )}
-      <Skeleton
-        className="h-4 max-w-(--skeleton-width) flex-1"
-        data-sidebar="menu-skeleton-text"
-        style={
-          {
-            "--skeleton-width": width,
-          } as React.CSSProperties
-        }
-      />
-    </div>
-  )
+	return (
+		<div
+			data-slot="sidebar-menu-skeleton"
+			data-sidebar="menu-skeleton"
+			className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+			{...props}
+		>
+			{showIcon && (
+				<Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+			)}
+			<Skeleton
+				className="h-4 max-w-(--skeleton-width) flex-1"
+				data-sidebar="menu-skeleton-text"
+				style={
+					{
+						"--skeleton-width": width
+					} as React.CSSProperties
+				}
+			/>
+		</div>
+	);
 }
 
 function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
-  return (
-    <ul
-      data-slot="sidebar-menu-sub"
-      data-sidebar="menu-sub"
-      className={cn(
-        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<ul
+			data-slot="sidebar-menu-sub"
+			data-sidebar="menu-sub"
+			className={cn(
+				"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+				"group-data-[collapsible=icon]:hidden",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
-function SidebarMenuSubItem({
-  className,
-  ...props
-}: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="sidebar-menu-sub-item"
-      data-sidebar="menu-sub-item"
-      className={cn("group/menu-sub-item relative", className)}
-      {...props}
-    />
-  )
+function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">) {
+	return (
+		<li
+			data-slot="sidebar-menu-sub-item"
+			data-sidebar="menu-sub-item"
+			className={cn("group/menu-sub-item relative", className)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarMenuSubButton({
-  asChild = false,
-  size = "md",
-  isActive = false,
-  className,
-  ...props
+	asChild = false,
+	size = "md",
+	isActive = false,
+	className,
+	...props
 }: React.ComponentProps<"a"> & {
-  asChild?: boolean
-  size?: "sm" | "md"
-  isActive?: boolean
+	asChild?: boolean;
+	size?: "sm" | "md";
+	isActive?: boolean;
 }) {
-  const Comp = asChild ? Slot : "a"
+	const Comp = asChild ? Slot : "a";
 
-  return (
-    <Comp
-      data-slot="sidebar-menu-sub-button"
-      data-sidebar="menu-sub-button"
-      data-size={size}
-      data-active={isActive}
-      className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-        size === "sm" && "text-xs",
-        size === "md" && "text-sm",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<Comp
+			data-slot="sidebar-menu-sub-button"
+			data-sidebar="menu-sub-button"
+			data-size={size}
+			data-active={isActive}
+			className={cn(
+				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+				"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+				size === "sm" && "text-xs",
+				size === "md" && "text-sm",
+				"group-data-[collapsible=icon]:hidden",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 export {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupAction,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSkeleton,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarSeparator,
-  SidebarTrigger,
-  useSidebar,
-}
+	Sidebar,
+	SidebarContent,
+	SidebarFooter,
+	SidebarGroup,
+	SidebarGroupAction,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarHeader,
+	SidebarInput,
+	SidebarInset,
+	SidebarMenu,
+	SidebarMenuAction,
+	SidebarMenuBadge,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarMenuSkeleton,
+	SidebarMenuSub,
+	SidebarMenuSubButton,
+	SidebarMenuSubItem,
+	SidebarProvider,
+	SidebarRail,
+	SidebarSeparator,
+	SidebarTrigger,
+	useSidebar
+};
diff --git a/packages/tracker/app/components/ui/skeleton.tsx b/packages/tracker/app/components/ui/skeleton.tsx
index 32ea0ef..eded6ce 100644
--- a/packages/tracker/app/components/ui/skeleton.tsx
+++ b/packages/tracker/app/components/ui/skeleton.tsx
@@ -1,13 +1,13 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="skeleton"
-      className={cn("bg-accent animate-pulse rounded-md", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="skeleton"
+			className={cn("bg-accent animate-pulse rounded-md", className)}
+			{...props}
+		/>
+	);
 }
 
-export { Skeleton }
+export { Skeleton };
diff --git a/packages/tracker/app/components/ui/sonner.tsx b/packages/tracker/app/components/ui/sonner.tsx
index 9b20afe..654b79c 100644
--- a/packages/tracker/app/components/ui/sonner.tsx
+++ b/packages/tracker/app/components/ui/sonner.tsx
@@ -1,40 +1,40 @@
-"use client"
+"use client";
 
 import {
-  CircleCheckIcon,
-  InfoIcon,
-  Loader2Icon,
-  OctagonXIcon,
-  TriangleAlertIcon,
-} from "lucide-react"
-import { useTheme } from "next-themes"
-import { Toaster as Sonner, type ToasterProps } from "sonner"
+	CircleCheckIcon,
+	InfoIcon,
+	Loader2Icon,
+	OctagonXIcon,
+	TriangleAlertIcon
+} from "lucide-react";
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+	const { theme = "system" } = useTheme();
 
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      icons={{
-        success: <CircleCheckIcon className="size-4" />,
-        info: <InfoIcon className="size-4" />,
-        warning: <TriangleAlertIcon className="size-4" />,
-        error: <OctagonXIcon className="size-4" />,
-        loading: <Loader2Icon className="size-4 animate-spin" />,
-      }}
-      style={
-        {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
-          "--normal-border": "var(--border)",
-          "--border-radius": "var(--radius)",
-        } as React.CSSProperties
-      }
-      {...props}
-    />
-  )
-}
+	return (
+		<Sonner
+			theme={theme as ToasterProps["theme"]}
+			className="toaster group"
+			icons={{
+				success: <CircleCheckIcon className="size-4" />,
+				info: <InfoIcon className="size-4" />,
+				warning: <TriangleAlertIcon className="size-4" />,
+				error: <OctagonXIcon className="size-4" />,
+				loading: <Loader2Icon className="size-4 animate-spin" />
+			}}
+			style={
+				{
+					"--normal-bg": "var(--popover)",
+					"--normal-text": "var(--popover-foreground)",
+					"--normal-border": "var(--border)",
+					"--border-radius": "var(--radius)"
+				} as React.CSSProperties
+			}
+			{...props}
+		/>
+	);
+};
 
-export { Toaster }
+export { Toaster };
diff --git a/packages/tracker/app/components/ui/spinner.tsx b/packages/tracker/app/components/ui/spinner.tsx
index a70e713..884069e 100644
--- a/packages/tracker/app/components/ui/spinner.tsx
+++ b/packages/tracker/app/components/ui/spinner.tsx
@@ -1,16 +1,16 @@
-import { Loader2Icon } from "lucide-react"
+import { Loader2Icon } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
-  return (
-    <Loader2Icon
-      role="status"
-      aria-label="Loading"
-      className={cn("size-4 animate-spin", className)}
-      {...props}
-    />
-  )
+	return (
+		<Loader2Icon
+			role="status"
+			aria-label="Loading"
+			className={cn("size-4 animate-spin", className)}
+			{...props}
+		/>
+	);
 }
 
-export { Spinner }
+export { Spinner };
diff --git a/packages/tracker/app/components/ui/table.tsx b/packages/tracker/app/components/ui/table.tsx
index 5513a5c..ab99e84 100644
--- a/packages/tracker/app/components/ui/table.tsx
+++ b/packages/tracker/app/components/ui/table.tsx
@@ -1,114 +1,92 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Table({ className, ...props }: React.ComponentProps<"table">) {
-  return (
-    <div
-      data-slot="table-container"
-      className="relative w-full overflow-x-auto"
-    >
-      <table
-        data-slot="table"
-        className={cn("w-full caption-bottom text-sm", className)}
-        {...props}
-      />
-    </div>
-  )
+	return (
+		<div data-slot="table-container" className="relative w-full overflow-x-auto">
+			<table
+				data-slot="table"
+				className={cn("w-full caption-bottom text-sm", className)}
+				{...props}
+			/>
+		</div>
+	);
 }
 
 function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
-  return (
-    <thead
-      data-slot="table-header"
-      className={cn("[&_tr]:border-b", className)}
-      {...props}
-    />
-  )
+	return (
+		<thead data-slot="table-header" className={cn("[&_tr]:border-b", className)} {...props} />
+	);
 }
 
 function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
-  return (
-    <tbody
-      data-slot="table-body"
-      className={cn("[&_tr:last-child]:border-0", className)}
-      {...props}
-    />
-  )
+	return (
+		<tbody
+			data-slot="table-body"
+			className={cn("[&_tr:last-child]:border-0", className)}
+			{...props}
+		/>
+	);
 }
 
 function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
-  return (
-    <tfoot
-      data-slot="table-footer"
-      className={cn(
-        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<tfoot
+			data-slot="table-footer"
+			className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+			{...props}
+		/>
+	);
 }
 
 function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
-  return (
-    <tr
-      data-slot="table-row"
-      className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<tr
+			data-slot="table-row"
+			className={cn(
+				"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 function TableHead({ className, ...props }: React.ComponentProps<"th">) {
-  return (
-    <th
-      data-slot="table-head"
-      className={cn(
-        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<th
+			data-slot="table-head"
+			className={cn(
+				"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
 function TableCell({ className, ...props }: React.ComponentProps<"td">) {
-  return (
-    <td
-      data-slot="table-cell"
-      className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<td
+			data-slot="table-cell"
+			className={cn(
+				"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
-function TableCaption({
-  className,
-  ...props
-}: React.ComponentProps<"caption">) {
-  return (
-    <caption
-      data-slot="table-caption"
-      className={cn("text-muted-foreground mt-4 text-sm", className)}
-      {...props}
-    />
-  )
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
+	return (
+		<caption
+			data-slot="table-caption"
+			className={cn("text-muted-foreground mt-4 text-sm", className)}
+			{...props}
+		/>
+	);
 }
 
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/packages/tracker/app/components/ui/textarea.tsx b/packages/tracker/app/components/ui/textarea.tsx
index 7f21b5e..aaab66c 100644
--- a/packages/tracker/app/components/ui/textarea.tsx
+++ b/packages/tracker/app/components/ui/textarea.tsx
@@ -1,18 +1,18 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
-  return (
-    <textarea
-      data-slot="textarea"
-      className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<textarea
+			data-slot="textarea"
+			className={cn(
+				"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+				className
+			)}
+			{...props}
+		/>
+	);
 }
 
-export { Textarea }
+export { Textarea };
diff --git a/packages/tracker/app/components/ui/tooltip.tsx b/packages/tracker/app/components/ui/tooltip.tsx
index a4e90d4..98fa8c2 100644
--- a/packages/tracker/app/components/ui/tooltip.tsx
+++ b/packages/tracker/app/components/ui/tooltip.tsx
@@ -1,61 +1,57 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function TooltipProvider({
-  delayDuration = 0,
-  ...props
+	delayDuration = 0,
+	...props
 }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  )
+	return (
+		<TooltipPrimitive.Provider
+			data-slot="tooltip-provider"
+			delayDuration={delayDuration}
+			{...props}
+		/>
+	);
 }
 
-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  )
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+	return (
+		<TooltipProvider>
+			<TooltipPrimitive.Root data-slot="tooltip" {...props} />
+		</TooltipProvider>
+	);
 }
 
-function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }
 
 function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
+	className,
+	sideOffset = 0,
+	children,
+	...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  )
+	return (
+		<TooltipPrimitive.Portal>
+			<TooltipPrimitive.Content
+				data-slot="tooltip-content"
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+					className
+				)}
+				{...props}
+			>
+				{children}
+				<TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+			</TooltipPrimitive.Content>
+		</TooltipPrimitive.Portal>
+	);
 }
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/packages/tracker/app/home/home.tsx b/packages/tracker/app/home/home.tsx
index 9ab939f..59d1c4c 100644
--- a/packages/tracker/app/home/home.tsx
+++ b/packages/tracker/app/home/home.tsx
@@ -59,9 +59,17 @@ export default function Home({ loaderData }: Route.ComponentProps) {
 				<div>
 					<h1 className="text-3xl font-bold tracking-tight">Projects</h1>
 					<p className="text-muted-foreground mt-2">
-						Welcome, <Link to="/profile" className="text-blue-500">{user.username}</Link>! You have {projects.length} project
+						Welcome,{" "}
+						<Link to="/profile" className="text-blue-500">
+							{user.username}
+						</Link>
+						! You have {projects.length} project
 						{projects.length === 1 ? "" : "s"}.
-						{user.isAdmin && <Link to="/admin/users"><span className="ml-2 text-blue-500">(Admin)</span></Link>}
+						{user.isAdmin && (
+							<Link to="/admin/users">
+								<span className="ml-2 text-blue-500">(Admin)</span>
+							</Link>
+						)}
 					</p>
 				</div>
 				<div className="flex gap-2">
diff --git a/packages/tracker/app/hooks/use-mobile.ts b/packages/tracker/app/hooks/use-mobile.ts
index 2b0fe1d..21e5c1f 100644
--- a/packages/tracker/app/hooks/use-mobile.ts
+++ b/packages/tracker/app/hooks/use-mobile.ts
@@ -1,19 +1,19 @@
-import * as React from "react"
+import * as React from "react";
 
-const MOBILE_BREAKPOINT = 768
+const MOBILE_BREAKPOINT = 768;
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+	const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
 
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
+	React.useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
 
-  return !!isMobile
+	return !!isMobile;
 }
diff --git a/packages/tracker/app/lib/utils.ts b/packages/tracker/app/lib/utils.ts
index bd0c391..3200be2 100644
--- a/packages/tracker/app/lib/utils.ts
+++ b/packages/tracker/app/lib/utils.ts
@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+	return twMerge(clsx(inputs));
 }
diff --git a/packages/tracker/app/login/action.ts b/packages/tracker/app/login/action.ts
index 38d9846..dc4e94e 100644
--- a/packages/tracker/app/login/action.ts
+++ b/packages/tracker/app/login/action.ts
@@ -16,7 +16,7 @@ export async function action({ request }: { request: Request }) {
 	}
 
 	const sessionId = await createSession(user.id);
-	
+
 	// Set session cookie
 	const headers = new Headers();
 	headers.append(
@@ -26,4 +26,4 @@ export async function action({ request }: { request: Request }) {
 	headers.append("Location", "/");
 
 	return redirect("/", { headers });
-}
\ No newline at end of file
+}
diff --git a/packages/tracker/app/login/page.tsx b/packages/tracker/app/login/page.tsx
index c386e75..49ab331 100644
--- a/packages/tracker/app/login/page.tsx
+++ b/packages/tracker/app/login/page.tsx
@@ -26,7 +26,7 @@ export async function loader({ request }: { request: Request }) {
 export default function LoginPage({ actionData }: Route.ComponentProps) {
 	useEffect(() => {
 		if (actionData?.error) {
-			toast(actionData.error)
+			toast(actionData.error);
 		}
 	}, [actionData]);
 
diff --git a/packages/tracker/app/projects/projectPageAction.ts b/packages/tracker/app/projects/projectPageAction.ts
index 3cb528c..610fc43 100644
--- a/packages/tracker/app/projects/projectPageAction.ts
+++ b/packages/tracker/app/projects/projectPageAction.ts
@@ -24,7 +24,7 @@ export const projectPageAction = async ({ request, params }: Route.ActionArgs) =
 
 	if (intent === "getColumns") {
 		const projectId = formData.get("projectId") as string;
-		
+
 		const projectColumns = await db
 			.select()
 			.from(columns)
diff --git a/packages/tracker/app/root.tsx b/packages/tracker/app/root.tsx
index 782299d..770dc65 100644
--- a/packages/tracker/app/root.tsx
+++ b/packages/tracker/app/root.tsx
@@ -9,7 +9,7 @@ import {
 
 import type { Route } from "./+types/root";
 import "./app.css";
-import { Toaster } from "@/components/ui/sonner"
+import { Toaster } from "@/components/ui/sonner";
 
 export const links: Route.LinksFunction = () => [
 	{ rel: "preconnect", href: "https://fonts.googleapis.com" },
diff --git a/packages/tracker/app/routes.ts b/packages/tracker/app/routes.ts
index 9d0c29d..e0a1844 100644
--- a/packages/tracker/app/routes.ts
+++ b/packages/tracker/app/routes.ts
@@ -4,10 +4,10 @@ export default [
 	index("home/home.tsx"),
 	route("project/:id", "projects/projectPage.tsx"),
 	route("project/new", "projects/newProject.tsx"),
-    route("login", "login/page.tsx"),
+	route("login", "login/page.tsx"),
 	route("admin/users", "admin/users.tsx"),
 	route("setup", "setup/setup.tsx"),
 	route("profile", "user/profile.tsx"),
 	route("logout", "logout/logout.tsx"),
-	route("project/:id/settings", "projects/settings.tsx"),
+	route("project/:id/settings", "projects/settings.tsx")
 ] satisfies RouteConfig;
diff --git a/packages/tracker/app/setup/setup.tsx b/packages/tracker/app/setup/setup.tsx
index 778d1d6..5adcfd3 100644
--- a/packages/tracker/app/setup/setup.tsx
+++ b/packages/tracker/app/setup/setup.tsx
@@ -19,7 +19,7 @@ export function meta({}: Route.MetaArgs) {
 export async function loader() {
 	// Check if there are any users
 	const existingUsers = await db.select().from(users).limit(1);
-	
+
 	// If users exist, redirect to login
 	if (existingUsers.length > 0) {
 		return redirect("/login");
@@ -40,16 +40,13 @@ export async function action({ request }: Route.ActionArgs) {
 	try {
 		// Create admin user
 		const userId = await createUser(username, password);
-		
+
 		// Make user admin
-		await db
-			.update(users)
-			.set({ isAdmin: true })
-			.where(eq(users.id, userId));
+		await db.update(users).set({ isAdmin: true }).where(eq(users.id, userId));
 
 		// Create session and redirect
 		const sessionId = await createSession(userId);
-		
+
 		const headers = new Headers();
 		headers.append(
 			"Set-Cookie",
@@ -70,9 +67,7 @@ export default function SetupPage() {
 			<Card className="w-full max-w-md">
 				<CardHeader>
 					<CardTitle>Initial Setup</CardTitle>
-					<CardDescription>
-						Create the first admin user for the system
-					</CardDescription>
+					<CardDescription>Create the first admin user for the system</CardDescription>
 				</CardHeader>
 				<CardContent>
 					<Form method="post" className="space-y-4">
@@ -104,4 +99,4 @@ export default function SetupPage() {
 			</Card>
 		</div>
 	);
-}
\ No newline at end of file
+}
diff --git a/packages/tracker/components.json b/packages/tracker/components.json
index bd9e15c..d29f30d 100644
--- a/packages/tracker/components.json
+++ b/packages/tracker/components.json
@@ -1,22 +1,22 @@
 {
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "app/app.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "iconLibrary": "lucide",
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "registries": {}
+	"$schema": "https://ui.shadcn.com/schema.json",
+	"style": "new-york",
+	"rsc": false,
+	"tsx": true,
+	"tailwind": {
+		"config": "",
+		"css": "app/app.css",
+		"baseColor": "neutral",
+		"cssVariables": true,
+		"prefix": ""
+	},
+	"iconLibrary": "lucide",
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/lib/utils",
+		"ui": "@/components/ui",
+		"lib": "@/lib",
+		"hooks": "@/hooks"
+	},
+	"registries": {}
 }
diff --git a/packages/tracker/drizzle.config.ts b/packages/tracker/drizzle.config.ts
index c4e42f1..8e0055e 100644
--- a/packages/tracker/drizzle.config.ts
+++ b/packages/tracker/drizzle.config.ts
@@ -6,5 +6,5 @@ export default defineConfig({
 	dialect: "sqlite",
 	dbCredentials: {
 		url: process.env.DB_FILE_NAME!
-	},
+	}
 });
diff --git a/packages/tracker/lib/auth-utils.ts b/packages/tracker/lib/auth-utils.ts
index 43ddf95..9e2d2eb 100644
--- a/packages/tracker/lib/auth-utils.ts
+++ b/packages/tracker/lib/auth-utils.ts
@@ -18,4 +18,4 @@ export async function requireAuth(request: Request) {
 		throw new Response("Unauthorized", { status: 401 });
 	}
 	return user;
-}
\ No newline at end of file
+}
diff --git a/packages/tracker/lib/auth.ts b/packages/tracker/lib/auth.ts
index 71927a6..6059c99 100644
--- a/packages/tracker/lib/auth.ts
+++ b/packages/tracker/lib/auth.ts
@@ -102,10 +102,7 @@ export async function canUserEditProject(userId: string, projectId: string) {
 		.select()
 		.from(projectPermissions)
 		.where(
-			and(
-				eq(projectPermissions.projectId, projectId),
-				eq(projectPermissions.userId, userId)
-			)
+			and(eq(projectPermissions.projectId, projectId), eq(projectPermissions.userId, userId))
 		)
 		.get();
 
@@ -131,7 +128,7 @@ export async function canUserViewProject(userID: string, projectId: string) {
 // Get projects accessible to user
 export async function getUserProjects(userId: string) {
 	const user = await db.select().from(users).where(eq(users.id, userId)).get();
-	
+
 	if (user?.isAdmin) {
 		// Admin can see all projects
 		return await db.select().from(projects).all();
@@ -141,16 +138,11 @@ export async function getUserProjects(userId: string) {
 	const accessibleProjects = await db
 		.select()
 		.from(projects)
-		.where(
-			or(
-				eq(projects.ownerId, userId),
-				eq(projectPermissions.userId, userId)
-			)
-		)
+		.where(or(eq(projects.ownerId, userId), eq(projectPermissions.userId, userId)))
 		.leftJoin(projectPermissions, eq(projects.id, projectPermissions.projectId))
 		.all();
 
-	return accessibleProjects.map(row => row.projects);
+	return accessibleProjects.map((row) => row.projects);
 }
 
 // Delete session (logout)
diff --git a/packages/tracker/lib/db/index.ts b/packages/tracker/lib/db/index.ts
index ff26263..24b14f9 100644
--- a/packages/tracker/lib/db/index.ts
+++ b/packages/tracker/lib/db/index.ts
@@ -1,4 +1,3 @@
 import { drizzle } from "drizzle-orm/libsql";
 
-
 export const db = drizzle(process.env.DB_FILE_NAME!);
diff --git a/packages/tracker/public/site.webmanifest b/packages/tracker/public/site.webmanifest
index 45dc8a2..52a2fe3 100644
--- a/packages/tracker/public/site.webmanifest
+++ b/packages/tracker/public/site.webmanifest
@@ -1 +1,11 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
+{
+	"name": "",
+	"short_name": "",
+	"icons": [
+		{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+		{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+	],
+	"theme_color": "#ffffff",
+	"background_color": "#ffffff",
+	"display": "standalone"
+}