@onahhas/hello-dev 1.0.0 → 1.0.1

package/frontend/src/styles.css

@@ -0,0 +1,596 @@
+:root {
+  --bg: #f7f1e8;
+  --bg2: #efe3d2;
+  --panel: rgba(255, 252, 246, 0.92);
+  --panel-solid: #fffaf1;
+  --panel-strong: #f0dfc5;
+  --ink: #201c1f;
+  --muted: #766d68;
+  --border: #dfcfb8;
+  --brand: #7a3d54;
+  --brand-strong: #4e2435;
+  --accent: #c1703a;
+  --accent-soft: #f4d9c7;
+  --success: #5c7a58;
+  --success-soft: #dcead9;
+  --warning: #aa7a28;
+  --danger: #a4473d;
+  --danger-soft: #f3d1ca;
+  --shadow: 0 24px 70px rgba(67, 42, 29, 0.14);
+  --radius: 24px;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color: var(--ink);
+  background: var(--bg);
+}
+
+:root[data-theme="dark"] {
+  --bg: #121111;
+  --bg2: #1d171b;
+  --panel: rgba(34, 30, 32, 0.92);
+  --panel-solid: #211d20;
+  --panel-strong: #30282d;
+  --ink: #fbf2e8;
+  --muted: #b9aaa0;
+  --border: #473d3d;
+  --brand: #d591ab;
+  --brand-strong: #f3bed2;
+  --accent: #e0985b;
+  --accent-soft: rgba(224, 152, 91, 0.16);
+  --success: #9cc497;
+  --success-soft: rgba(156, 196, 151, 0.14);
+  --warning: #e1b768;
+  --danger: #ee9085;
+  --danger-soft: rgba(238, 144, 133, 0.15);
+  --shadow: 0 26px 80px rgba(0, 0, 0, 0.35);
+}
+
+* { box-sizing: border-box; }
+
+html,
+body,
+#root {
+  min-height: 100%;
+  margin: 0;
+}
+
+body {
+  background:
+    radial-gradient(circle at 18% -10%, rgba(122, 61, 84, 0.24), transparent 35rem),
+    radial-gradient(circle at 94% 5%, rgba(193, 112, 58, 0.18), transparent 30rem),
+    linear-gradient(135deg, var(--bg), var(--bg2));
+}
+
+button,
+input,
+select,
+textarea { font: inherit; }
+button { cursor: pointer; }
+button:disabled { cursor: not-allowed; opacity: 0.62; }
+a { color: var(--brand-strong); text-decoration: none; font-weight: 800; }
+a:hover { text-decoration: underline; }
+
+label {
+  display: grid;
+  gap: 0.48rem;
+  color: var(--muted);
+  font-size: 0.9rem;
+  font-weight: 800;
+}
+
+input,
+select,
+textarea {
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  background: color-mix(in srgb, var(--panel-solid) 92%, transparent);
+  color: var(--ink);
+  padding: 0.86rem 0.95rem;
+  outline: none;
+  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  border-color: var(--brand);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent);
+}
+
+textarea { resize: none; }
+small { color: var(--muted); }
+
+.authPage {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 430px;
+  gap: 2rem;
+  align-items: center;
+  padding: 3rem;
+}
+
+.authVisual {
+  min-height: 74vh;
+  border-radius: 38px;
+  padding: 3.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  position: relative;
+  overflow: hidden;
+  color: #fff8ef;
+  background:
+    linear-gradient(135deg, rgba(29, 22, 26, 0.94), rgba(122, 61, 84, 0.76)),
+    repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 18px);
+  box-shadow: var(--shadow);
+}
+
+.authVisual::before {
+  content: "";
+  position: absolute;
+  inset: auto -8rem -12rem auto;
+  width: 28rem;
+  height: 28rem;
+  border-radius: 50%;
+  background: rgba(193, 112, 58, 0.38);
+  filter: blur(4px);
+}
+
+.authVisual h1 {
+  position: relative;
+  max-width: 760px;
+  font-size: clamp(2.5rem, 6vw, 6rem);
+  line-height: 0.92;
+  letter-spacing: -0.08em;
+  margin: 1.2rem 0;
+}
+
+.authVisual p {
+  position: relative;
+  max-width: 620px;
+  color: rgba(255, 248, 239, 0.76);
+  font-size: 1.1rem;
+  line-height: 1.7;
+}
+
+.authBadge,
+.eyebrow {
+  width: fit-content;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  font-size: 0.72rem;
+  font-weight: 950;
+}
+
+.authBadge {
+  position: relative;
+  padding: 0.55rem 0.9rem;
+  border: 1px solid rgba(255, 248, 239, 0.28);
+  border-radius: 999px;
+  color: #ffe0c6;
+  background: rgba(255, 248, 239, 0.08);
+}
+
+.authThemeBtn {
+  position: absolute;
+  top: 1.3rem;
+  right: 1.3rem;
+  border: 1px solid rgba(255, 248, 239, 0.28);
+  background: rgba(255, 248, 239, 0.08);
+  color: #fff8ef;
+  border-radius: 999px;
+  padding: 0.7rem 1rem;
+  font-weight: 900;
+}
+
+.authCard,
+.panelCard,
+.tableCard,
+.timelineCard,
+.calendarCard,
+.profileCardLarge,
+.modalCard,
+.heroBoard {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--panel);
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(18px);
+}
+
+.authCard {
+  display: grid;
+  gap: 1.1rem;
+  padding: 2rem;
+}
+
+.authCard h2,
+.pageHeader h1,
+.sectionTitle h2,
+.modalHeader h2,
+.heroBoard h2 {
+  margin: 0;
+  letter-spacing: -0.045em;
+}
+
+.authCard h2 { font-size: 2.35rem; }
+.authCard p,
+.pageHeader p,
+.modalHeader p,
+.heroBoard p {
+  color: var(--muted);
+  margin: 0;
+  line-height: 1.6;
+}
+
+.appShell {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 288px minmax(0, 1fr);
+}
+
+.sidebar {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  padding: 1.15rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  background: color-mix(in srgb, var(--panel-solid) 74%, transparent);
+  border-right: 1px solid var(--border);
+  backdrop-filter: blur(18px);
+}
+
+.brandBlock {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  padding: 1rem;
+  border-radius: 24px;
+  background: linear-gradient(135deg, var(--ink), var(--brand-strong));
+  color: var(--panel-solid);
+}
+
+.brandBlock span,
+.profileMini small { display: block; color: color-mix(in srgb, var(--panel-solid) 68%, transparent); font-size: 0.78rem; margin-top: 0.12rem; }
+
+.brandMark,
+.avatar,
+.profileAvatarLarge {
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  font-weight: 950;
+  background: var(--accent);
+  color: #fff8ef;
+}
+
+.brandMark { width: 46px; height: 46px; border-radius: 16px; }
+.avatar { width: 42px; height: 42px; border-radius: 15px; }
+
+.navList { display: grid; gap: 0.35rem; }
+.navList a {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.86rem 0.92rem;
+  border-radius: 17px;
+  color: var(--muted);
+  font-weight: 900;
+  text-decoration: none;
+}
+.navList a span { width: 1.1rem; text-align: center; }
+.navList a:hover,
+.navList a.active {
+  background: var(--panel-strong);
+  color: var(--ink);
+}
+
+.themeSwitch {
+  margin-top: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.7rem;
+  padding: 0.8rem;
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  color: var(--muted);
+  font-size: 0.86rem;
+  font-weight: 900;
+}
+
+.sideFooter { display: grid; gap: 0.8rem; }
+.profileMini {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  padding: 0.85rem;
+  border-radius: 18px;
+  background: color-mix(in srgb, var(--ink) 5%, transparent);
+  color: var(--ink);
+}
+
+.mainPanel { padding: 2.2rem; overflow-x: hidden; }
+
+.pageHeader {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: flex-start;
+  margin-bottom: 1.2rem;
+}
+.pageHeader h1 { font-size: clamp(2rem, 4vw, 3.7rem); }
+.eyebrow { color: var(--accent); }
+.headerActions,
+.buttonGroup,
+.modalActions,
+.cardActions,
+.rowActions { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; }
+
+.primaryBtn,
+.ghostBtn,
+.dangerBtn,
+.iconBtn {
+  border: 0;
+  border-radius: 999px;
+  padding: 0.78rem 1rem;
+  font-weight: 950;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+}
+.primaryBtn { background: var(--brand); color: #fff8ef; }
+.ghostBtn { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
+.dangerBtn { background: var(--danger-soft); color: var(--danger); }
+.iconBtn { width: 42px; height: 42px; padding: 0; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); font-size: 1.35rem; }
+.full { width: 100%; }
+
+.heroBoard {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.3rem;
+  margin-bottom: 1rem;
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--brand) 13%, transparent), transparent),
+    var(--panel);
+}
+.heroBoard h2 { font-size: 2rem; }
+
+.statsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+  gap: 0.9rem;
+  margin: 1rem 0;
+}
+.statCard {
+  min-height: 136px;
+  padding: 1.1rem;
+  border: 1px solid var(--border);
+  border-radius: 24px;
+  background: var(--panel);
+  box-shadow: 0 16px 40px rgba(38, 25, 16, 0.08);
+}
+.statCard span { color: var(--muted); font-weight: 900; }
+.statCard strong { display: block; font-size: 2.3rem; letter-spacing: -0.06em; margin: 0.45rem 0 0.1rem; }
+.statCard small { display: block; }
+
+.twoColumns {
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
+  gap: 1rem;
+  margin-top: 1rem;
+}
+.panelCard { padding: 1.1rem; }
+.sectionTitle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.9rem;
+}
+
+.filtersBar {
+  display: grid;
+  grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(150px, 190px));
+  gap: 0.75rem;
+  margin: 1rem 0;
+}
+
+.taskList {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
+  gap: 0.9rem;
+}
+.compactList { grid-template-columns: 1fr; }
+.taskCard {
+  position: relative;
+  overflow: hidden;
+  display: grid;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 1px solid var(--border);
+  border-radius: 24px;
+  background: var(--panel);
+  box-shadow: 0 16px 42px rgba(38, 25, 16, 0.08);
+}
+.taskCard::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 5px;
+  background: var(--brand);
+}
+.taskCard.priorityHigh::before { background: var(--danger); }
+.taskCard.priorityMedium::before { background: var(--warning); }
+.taskCard.priorityLow::before { background: var(--success); }
+.taskCard.overdue { outline: 2px solid color-mix(in srgb, var(--danger) 26%, transparent); }
+.taskTopLine { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
+.taskNumber,
+.monoCell { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 950; color: var(--brand-strong); }
+.taskCard h3 { margin: 0; font-size: 1.15rem; letter-spacing: -0.025em; }
+.taskCard p { margin: 0; color: var(--muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+.taskMeta { display: flex; flex-wrap: wrap; gap: 0.45rem; color: var(--muted); font-size: 0.78rem; }
+.taskMeta span,
+.tinyText,
+.softBadge,
+.countBadge,
+.priorityBadge,
+.dangerBadge {
+  border-radius: 999px;
+  padding: 0.32rem 0.55rem;
+  background: color-mix(in srgb, var(--ink) 7%, transparent);
+  color: var(--muted);
+  font-size: 0.78rem;
+  font-weight: 900;
+}
+.requestHint { color: var(--warning); font-size: 0.82rem; font-weight: 900; }
+
+.statusPill {
+  border-radius: 999px;
+  padding: 0.32rem 0.58rem;
+  font-size: 0.76rem;
+  font-weight: 950;
+  background: color-mix(in srgb, var(--ink) 7%, transparent);
+}
+.statusPill.Todo { color: var(--muted); }
+.statusPill.InProgress { color: var(--warning); }
+.statusPill.Done { color: var(--success); }
+.statusPill.Cancelled { color: var(--danger); }
+.priorityBadge.High { color: var(--danger); background: var(--danger-soft); }
+.priorityBadge.Medium { color: var(--warning); }
+.priorityBadge.Low { color: var(--success); background: var(--success-soft); }
+.dangerBadge { color: var(--danger); background: var(--danger-soft); }
+
+.tableCard { overflow-x: auto; }
+.tableCard table { width: 100%; border-collapse: collapse; min-width: 950px; }
+th, td { text-align: left; padding: 0.85rem; border-bottom: 1px solid var(--border); vertical-align: top; }
+th { color: var(--muted); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; }
+td small { display: block; max-width: 360px; margin-top: 0.24rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+tr:hover td { background: color-mix(in srgb, var(--ink) 3%, transparent); }
+
+.requestPanel { margin: 1rem 0; }
+.requestList { display: grid; gap: 0.8rem; }
+.requestItem {
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  padding: 0.9rem;
+  background: color-mix(in srgb, var(--panel-solid) 85%, transparent);
+  display: grid;
+  gap: 0.7rem;
+}
+.requestItem span { color: var(--muted); display: block; margin-top: 0.16rem; }
+.changeGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.5rem; }
+.changeGrid span { padding: 0.6rem; background: color-mix(in srgb, var(--ink) 5%, transparent); border-radius: 14px; margin: 0; }
+.requestDescription { margin: 0; color: var(--muted); max-height: 7rem; overflow: auto; }
+
+.boardGrid { display: grid; grid-template-columns: repeat(4, minmax(250px, 1fr)); gap: 0.9rem; align-items: start; overflow-x: auto; }
+.boardColumn { min-height: 460px; border: 1px solid var(--border); border-radius: 24px; background: color-mix(in srgb, var(--panel-solid) 64%, transparent); padding: 0.8rem; }
+.boardHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
+.boardHeader span { background: var(--panel-strong); border-radius: 999px; padding: 0.25rem 0.6rem; font-weight: 900; }
+.boardTasks { display: grid; gap: 0.75rem; }
+.emptyColumn,
+.emptyText,
+.emptyState { color: var(--muted); }
+.emptyState { padding: 1.2rem; border: 1px dashed var(--border); border-radius: 20px; background: color-mix(in srgb, var(--panel-solid) 58%, transparent); }
+
+.calendarCard { padding: 1rem; }
+.calendarTitle { font-size: 1.5rem; font-weight: 950; margin-bottom: 1rem; }
+.calendarWeekdays,
+.calendarGrid { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); gap: 0.55rem; }
+.calendarWeekdays span { color: var(--muted); font-size: 0.78rem; font-weight: 950; text-transform: uppercase; letter-spacing: 0.08em; }
+.calendarCell { min-height: 130px; border: 1px solid var(--border); border-radius: 18px; padding: 0.65rem; background: color-mix(in srgb, var(--panel-solid) 78%, transparent); display: grid; align-content: start; gap: 0.35rem; }
+.mutedDay { opacity: 0.55; }
+.calendarTask { border: 0; border-radius: 12px; padding: 0.35rem 0.45rem; text-align: left; font-size: 0.78rem; font-weight: 900; background: var(--accent-soft); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.calendarTask.High { background: var(--danger-soft); }
+.calendarTask.Low { background: var(--success-soft); }
+
+.activityList,
+.quickLinks { display: grid; gap: 0.75rem; }
+.activityList article,
+.quickLinks a,
+.timelineItem {
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  padding: 0.85rem;
+  background: color-mix(in srgb, var(--panel-solid) 72%, transparent);
+}
+.activityList span { display: block; color: var(--muted); margin-top: 0.2rem; }
+.timelineCard { padding: 1rem; display: grid; gap: 0.8rem; }
+.timelineItem { display: flex; gap: 0.8rem; }
+.timelineDot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); margin-top: 0.3rem; flex: 0 0 auto; }
+.timelineItem p { margin: 0.2rem 0; color: var(--muted); }
+
+.profileCardLarge { padding: 1.2rem; display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
+.profileAvatarLarge { width: 78px; height: 78px; border-radius: 26px; font-size: 2rem; }
+.profileCardLarge h2 { margin: 0; }
+.profileCardLarge p { margin: 0.2rem 0 0.7rem; color: var(--muted); }
+.profileFields { display: flex; flex-wrap: wrap; gap: 0.6rem; }
+.profileFields span { padding: 0.42rem 0.7rem; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
+.profileForm { max-width: 900px; }
+
+.modalLayer {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: grid;
+  place-items: center;
+  padding: 1.2rem;
+  background: rgba(12, 10, 10, 0.58);
+}
+.modalCard {
+  width: min(560px, 100%);
+  max-height: calc(100vh - 2.4rem);
+  padding: 1.2rem;
+  display: grid;
+  gap: 1rem;
+}
+.wideModal { width: min(880px, 100%); }
+.modalHeader { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
+.modalBodyGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
+.spanTwo { grid-column: 1 / -1; }
+.descriptionField textarea { height: 180px; max-height: 180px; overflow: auto; }
+.detailsModal { gap: 1rem; }
+.detailPills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.descriptionBox { max-height: 240px; overflow: auto; white-space: pre-wrap; line-height: 1.6; color: var(--muted); background: color-mix(in srgb, var(--ink) 5%, transparent); padding: 1rem; border-radius: 18px; }
+.detailsGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.7rem; }
+.detailsGrid span { display: grid; gap: 0.15rem; color: var(--muted); padding: 0.75rem; border-radius: 16px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
+.detailsGrid strong { color: var(--ink); }
+
+.formGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
+.errorBox,
+.successBox { border-radius: 16px; padding: 0.85rem 1rem; font-weight: 850; }
+.errorBox { background: var(--danger-soft); color: var(--danger); }
+.successBox { background: var(--success-soft); color: var(--success); }
+.statusDot { border-radius: 999px; padding: 0.35rem 0.65rem; font-weight: 900; }
+.statusDot.active { background: var(--success-soft); color: var(--success); }
+.statusDot.inactive { background: var(--danger-soft); color: var(--danger); }
+
+@media (max-width: 1100px) {
+  .authPage { grid-template-columns: 1fr; padding: 1.4rem; }
+  .authVisual { min-height: 420px; }
+  .appShell { grid-template-columns: 1fr; }
+  .sidebar { position: static; height: auto; }
+  .navList { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
+  .themeSwitch { margin-top: 0; }
+  .twoColumns { grid-template-columns: 1fr; }
+  .filtersBar { grid-template-columns: 1fr 1fr; }
+  .boardGrid { grid-template-columns: repeat(4, minmax(260px, 1fr)); }
+}
+
+@media (max-width: 720px) {
+  .mainPanel { padding: 1rem; }
+  .pageHeader { display: grid; }
+  .filtersBar,
+  .formGrid,
+  .modalBodyGrid { grid-template-columns: 1fr; }
+  .spanTwo { grid-column: auto; }
+  .calendarWeekdays,
+  .calendarGrid { grid-template-columns: repeat(7, minmax(82px, 1fr)); }
+  .calendarCell { min-height: 112px; }
+}

package/frontend/src/theme.tsx

@@ -0,0 +1,49 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode
+} from 'react';
+
+type Theme = 'light' | 'dark';
+
+interface ThemeContextValue {
+  theme: Theme;
+  toggleTheme: () => void;
+}
+
+const THEME_KEY = 'devtasks_theme';
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+function readTheme(): Theme {
+  const stored = localStorage.getItem(THEME_KEY);
+  if (stored === 'light' || stored === 'dark') return stored;
+
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setTheme] = useState<Theme>(() => readTheme());
+
+  useEffect(() => {
+    document.documentElement.dataset.theme = theme;
+    localStorage.setItem(THEME_KEY, theme);
+  }, [theme]);
+
+  const toggleTheme = useCallback(() => {
+    setTheme((current) => current === 'dark' ? 'light' : 'dark');
+  }, []);
+
+  const value = useMemo(() => ({ theme, toggleTheme }), [theme, toggleTheme]);
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme() {
+  const value = useContext(ThemeContext);
+  if (!value) throw new Error('useTheme must be used inside ThemeProvider.');
+  return value;
+}

package/frontend/src/types.ts

@@ -0,0 +1,78 @@
+export type UserRole = 'Admin' | 'User';
+export type TaskStatus = 'Todo' | 'InProgress' | 'Done' | 'Cancelled';
+export type TaskPriority = 'Low' | 'Medium' | 'High';
+export type TaskVisibility = 'Private' | 'Public';
+export type EditRequestStatus = 'Pending' | 'Accepted' | 'Rejected';
+
+export interface User {
+  id: string;
+  fullName: string;
+  email: string;
+  role: UserRole;
+  isActive: boolean;
+  createdAt: string;
+}
+
+export interface TaskItem {
+  id: number;
+  title: string;
+  description: string;
+  status: TaskStatus;
+  priority: TaskPriority;
+  visibility: TaskVisibility;
+  dueDate: string | null;
+  createdByUserId: string;
+  createdByFullName: string;
+  assignedToUserId: string | null;
+  assignedToFullName: string | null;
+  createdAt: string;
+  updatedAt: string;
+  isOverdue: boolean;
+  pendingEditRequestCount: number;
+}
+
+export interface TaskEditRequest {
+  id: string;
+  taskId: number;
+  taskTitle: string;
+  requestedByUserId: string;
+  requestedByFullName: string;
+  requestedByEmail: string;
+  title: string | null;
+  description: string | null;
+  status: TaskStatus | null;
+  priority: TaskPriority | null;
+  visibility: TaskVisibility | null;
+  dueDate: string | null;
+  clearDueDate: boolean;
+  assignedToUserId: string | null;
+  assignedToFullName: string | null;
+  clearAssignedUser: boolean;
+  statusOfRequest: EditRequestStatus;
+  ownerNote: string | null;
+  createdAt: string;
+  resolvedAt: string | null;
+}
+
+export interface ActivityLog {
+  id: string;
+  action: string;
+  entityName: string;
+  entityId: string;
+  userId: string;
+  userFullName: string;
+  createdAt: string;
+}
+
+export interface AuthResponse {
+  token: string;
+  user: User;
+}
+
+export interface RegisterResponse {
+  message: string;
+}
+
+export interface ApiError {
+  message?: string;
+}