agentic-dev 0.1.0 → 0.2.0

package/client/mobile/src/main.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+
+import { AuthProvider } from "@/auth/AuthProvider";
+import { App } from "./App";
+import "./styles/globals.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <AuthProvider>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </AuthProvider>
+  </React.StrictMode>,
+);

package/client/mobile/src/pages/DashboardPage.tsx

@@ -0,0 +1,172 @@
+import { useEffect, useState } from "react";
+import { ArrowUpRight, AlertTriangle, PackageCheck, Truck } from "lucide-react";
+import { Link } from "react-router-dom";
+
+import { useAuth } from "@/auth/AuthProvider";
+import {
+  fetchFulfillmentOverview,
+  type FulfillmentOverviewResponse,
+} from "@/api/fulfillment";
+import { Card } from "@/components/ui/card";
+
+const statIcons = {
+  "Open tasks": PackageCheck,
+  Blocked: AlertTriangle,
+  "Outbound ready": Truck,
+} as const;
+
+function timelineToneClassName(tone: string) {
+  if (tone === "success") {
+    return "bg-[#dff3ec] text-[var(--in-accent)]";
+  }
+  if (tone === "warning") {
+    return "bg-[#fff0d8] text-[#b56a1f]";
+  }
+
+  return "bg-[#e9f4ff] text-[#245f92]";
+}
+
+export function DashboardPage() {
+  const { token } = useAuth();
+  const [overview, setOverview] = useState<FulfillmentOverviewResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!token?.access_token) {
+      return;
+    }
+
+    let cancelled = false;
+
+    setLoading(true);
+    setError(null);
+
+    fetchFulfillmentOverview(token.access_token)
+      .then((response) => {
+        if (!cancelled) {
+          setOverview(response);
+        }
+      })
+      .catch((nextError: Error) => {
+        if (!cancelled) {
+          setError(nextError.message);
+          setOverview(null);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [token?.access_token]);
+
+  return (
+    <div className="grid gap-6 xl:grid-cols-[1fr_320px]">
+      <div className="space-y-6">
+        <section className="rounded-[32px] bg-[linear-gradient(135deg,#fff7e8_0%,#f4efe6_45%,#e2f3ec_100%)] px-6 py-7">
+          <p className="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--in-accent)]">Daily relay</p>
+          <div className="mt-3 flex flex-wrap items-end justify-between gap-4">
+            <div className="max-w-2xl">
+              <h1 className="text-4xl font-black tracking-[-0.04em] text-[var(--in-text)]">주문 이행 상태와 예외 대응을 한 화면에서 이어붙이는 모바일 셸</h1>
+              <p className="mt-4 text-base leading-7 text-[var(--in-muted)]">
+                픽킹, 패킹, 예외 검토, 출고 준비까지 현재 이행 상태를 한눈에 보여주는 운영 모바일 surface다.
+              </p>
+            </div>
+            <div className="rounded-[28px] border border-white/70 bg-white/80 px-5 py-4 shadow-sm">
+              <p className="text-sm text-[var(--in-muted)]">Units in motion</p>
+              <p className="mt-2 text-3xl font-black text-[var(--in-accent)]">{loading && !overview ? "..." : `${overview?.throughput_total ?? "0"} units`}</p>
+            </div>
+          </div>
+          {error ? <p className="mt-4 text-sm font-semibold text-[#9d4d26]">{error}</p> : null}
+        </section>
+
+        <section className="grid gap-4 md:grid-cols-3">
+          {(overview?.stats ?? []).map((stat) => {
+            const Icon = statIcons[stat.label as keyof typeof statIcons] ?? PackageCheck;
+            return (
+              <Card key={stat.label} className="p-5 shadow-[0_18px_48px_rgba(25,54,46,0.06)]">
+                <div className="flex items-start justify-between gap-4">
+                  <div>
+                    <p className="text-sm text-[var(--in-muted)]">{stat.label}</p>
+                    <p className="mt-3 text-3xl font-black text-[var(--in-text)]">{stat.value}</p>
+                  </div>
+                  <div className="rounded-2xl bg-[var(--in-accent-soft)] p-3 text-[var(--in-accent)]">
+                    <Icon className="h-5 w-5" />
+                  </div>
+                </div>
+              </Card>
+            );
+          })}
+          {loading && !overview ? (
+            <Card className="p-5 shadow-[0_18px_48px_rgba(25,54,46,0.06)] md:col-span-3">
+              <p className="text-sm text-[var(--in-muted)]">Overview</p>
+              <p className="mt-3 text-lg font-semibold text-[var(--in-text)]">서비스 현황을 불러오는 중입니다.</p>
+            </Card>
+          ) : null}
+        </section>
+
+        <Card className="p-6 shadow-[0_18px_48px_rgba(25,54,46,0.06)]">
+          <div className="flex items-center justify-between gap-3">
+            <div>
+              <h2 className="text-xl font-black text-[var(--in-text)]">Relay timeline</h2>
+              <p className="mt-2 text-sm text-[var(--in-muted)]">이행 단계별 handoff와 예외 대응 이벤트를 시간축으로 배치한다.</p>
+            </div>
+            <div className="flex items-center gap-2">
+              <Link
+                className="inline-flex items-center gap-2 rounded-full bg-[var(--in-accent-soft)] px-3 py-2 text-sm font-semibold text-[var(--in-accent)]"
+                to="/shipping"
+              >
+                Shipping
+                <ArrowUpRight className="h-4 w-4" />
+              </Link>
+              <Link
+                className="inline-flex items-center gap-2 rounded-full bg-[var(--in-accent-soft)] px-3 py-2 text-sm font-semibold text-[var(--in-accent)]"
+                to="/fulfillment"
+              >
+                Fulfillment
+                <ArrowUpRight className="h-4 w-4" />
+              </Link>
+            </div>
+          </div>
+
+          <div className="mt-6 grid gap-4 md:grid-cols-3">
+            {loading && !(overview?.timeline.length ?? 0) ? <div className="text-sm text-[var(--in-muted)] md:col-span-3">타임라인을 불러오는 중입니다.</div> : null}
+            {!loading && !error && !(overview?.timeline.length ?? 0) ? (
+              <div className="text-sm text-[var(--in-muted)] md:col-span-3">표시할 타임라인 이벤트가 없습니다.</div>
+            ) : null}
+            {(overview?.timeline ?? []).map((item) => (
+              <div key={item.time} className="rounded-[24px] border border-[var(--in-border)] bg-white p-5">
+                <div className={`inline-flex rounded-full px-3 py-1 text-xs font-semibold ${timelineToneClassName(item.tone)}`}>{item.time}</div>
+                <p className="mt-4 text-lg font-bold text-[var(--in-text)]">{item.title}</p>
+              </div>
+            ))}
+          </div>
+        </Card>
+      </div>
+
+      <Card className="p-6 shadow-[0_18px_48px_rgba(25,54,46,0.06)]">
+        <h2 className="text-xl font-black text-[var(--in-text)]">Stage load</h2>
+        <p className="mt-2 text-sm text-[var(--in-muted)]">현재 진행 중인 단계별 작업량과 병목 구간을 우선순위 큐로 보여준다.</p>
+
+        <div className="mt-6 space-y-4">
+          {loading && !(overview?.stage_load.length ?? 0) ? <div className="text-sm text-[var(--in-muted)]">단계별 적재량을 불러오는 중입니다.</div> : null}
+          {!loading && !error && !(overview?.stage_load.length ?? 0) ? <div className="text-sm text-[var(--in-muted)]">표시할 단계 데이터가 없습니다.</div> : null}
+          {(overview?.stage_load ?? []).map((entry) => (
+            <div key={entry.label}>
+              <div className="flex items-center justify-between text-sm">
+                <span className="font-semibold text-[var(--in-text)]">{entry.label}</span>
+                <span className="text-[var(--in-muted)]">{entry.value}</span>
+              </div>
+            </div>
+          ))}
+          {error ? <div className="text-sm font-semibold text-[#9d4d26]">{error}</div> : null}
+        </div>
+      </Card>
+    </div>
+  );
+}

package/client/mobile/src/pages/FulfillmentPage.tsx

@@ -0,0 +1,138 @@
+import { useEffect, useState } from "react";
+
+import { useAuth } from "@/auth/AuthProvider";
+import {
+  fetchFulfillmentBoard,
+  type FulfillmentBoardResponse,
+} from "@/api/fulfillment";
+import { Card } from "@/components/ui/card";
+
+function fulfillmentStatusClassName(status: string) {
+  if (status === "Completed") {
+    return "bg-[#dff3ec] text-[var(--in-accent)]";
+  }
+  if (status === "Blocked") {
+    return "bg-[#ffe2d7] text-[#c4663a]";
+  }
+  if (status === "In progress") {
+    return "bg-[#fff0d8] text-[#b56a1f]";
+  }
+
+  return "bg-[#efe7d8] text-[var(--in-muted)]";
+}
+
+export function FulfillmentPage() {
+  const { token } = useAuth();
+  const [board, setBoard] = useState<FulfillmentBoardResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!token?.access_token) {
+      return;
+    }
+
+    let cancelled = false;
+
+    setLoading(true);
+    setError(null);
+
+    fetchFulfillmentBoard(token.access_token)
+      .then((response) => {
+        if (!cancelled) {
+          setBoard(response);
+        }
+      })
+      .catch((nextError: Error) => {
+        if (!cancelled) {
+          setError(nextError.message);
+          setBoard(null);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [token?.access_token]);
+
+  return (
+    <div className="grid gap-6 xl:grid-cols-[1fr_300px]">
+      <Card className="overflow-hidden shadow-[0_18px_48px_rgba(25,54,46,0.06)]">
+        <div className="border-b border-[var(--in-border)] px-6 py-5">
+          <h2 className="text-xl font-black text-[var(--in-text)]">Fulfillment board</h2>
+          <p className="mt-2 text-sm text-[var(--in-muted)]">작업 단위, 담당자, 단계, SLA를 한 번에 보여주는 이행 보드 surface다.</p>
+        </div>
+
+        <table className="w-full border-collapse text-sm">
+          <thead className="bg-[#faf6ef] text-left text-[var(--in-muted)]">
+            <tr>
+              {["Order", "Task", "Assignee", "Status", "SLA"].map((cell) => (
+                <th key={cell} className="border-b border-[var(--in-border)] px-6 py-4 font-semibold">
+                  {cell}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr>
+                <td className="border-b border-[var(--in-border)] px-6 py-4 text-[var(--in-muted)]" colSpan={5}>
+                  이행 보드를 불러오는 중입니다.
+                </td>
+              </tr>
+            ) : null}
+            {error ? (
+              <tr>
+                <td className="border-b border-[var(--in-border)] px-6 py-4 text-[#9d4d26]" colSpan={5}>
+                  {error}
+                </td>
+              </tr>
+            ) : null}
+            {!loading && !error && !(board?.tasks.length ?? 0) ? (
+              <tr>
+                <td className="border-b border-[var(--in-border)] px-6 py-4 text-[var(--in-muted)]" colSpan={5}>
+                  현재 표시할 작업이 없습니다.
+                </td>
+              </tr>
+            ) : null}
+            {(board?.tasks ?? []).map((task) => (
+              <tr key={task.id}>
+                <td className="border-b border-[var(--in-border)] px-6 py-4 font-semibold text-[var(--in-accent)]">{task.order_id}</td>
+                <td className="border-b border-[var(--in-border)] px-6 py-4">
+                  <div className="font-semibold text-[var(--in-text)]">{task.title}</div>
+                  <div className="mt-1 text-xs text-[var(--in-muted)]">
+                    {task.stage} · {task.priority}
+                  </div>
+                </td>
+                <td className="border-b border-[var(--in-border)] px-6 py-4 text-[var(--in-muted)]">{task.assignee}</td>
+                <td className="border-b border-[var(--in-border)] px-6 py-4">
+                  <span className={`rounded-full px-3 py-1 text-xs font-semibold ${fulfillmentStatusClassName(task.status)}`}>{task.status}</span>
+                </td>
+                <td className="border-b border-[var(--in-border)] px-6 py-4 text-[var(--in-text)]">{task.sla}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </Card>
+
+      <Card className="p-6 shadow-[0_18px_48px_rgba(25,54,46,0.06)]">
+        <h2 className="text-xl font-black text-[var(--in-text)]">Fulfillment notes</h2>
+        <div className="mt-5 space-y-4">
+          {loading ? <div className="text-sm text-[var(--in-muted)]">노트를 불러오는 중입니다.</div> : null}
+          {error ? <div className="text-sm font-semibold text-[#9d4d26]">{error}</div> : null}
+          {!loading && !error && !(board?.notes.length ?? 0) ? <div className="text-sm text-[var(--in-muted)]">노트가 없습니다.</div> : null}
+          {(board?.notes ?? []).map((note) => (
+            <div key={note.id} className="rounded-[22px] border border-[var(--in-border)] bg-white px-4 py-4 text-sm leading-6 text-[var(--in-muted)]">
+              {note.note}
+            </div>
+          ))}
+        </div>
+      </Card>
+    </div>
+  );
+}

package/client/mobile/src/pages/LoginPage.tsx

@@ -0,0 +1,74 @@
+import { useState } from "react";
+import { Navigate, useLocation } from "react-router-dom";
+
+import { useAuth } from "@/auth/AuthProvider";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { inTheme } from "@/theme";
+import { inThemeVars } from "@/theme-vars";
+
+export function LoginPage() {
+  const { authenticating, login, user } = useAuth();
+  const location = useLocation();
+  const [email, setEmail] = useState("operator@example.com");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  if (user) {
+    const destination = (location.state as { from?: { pathname?: string } } | null)?.from?.pathname ?? "/";
+    return <Navigate to={destination} replace />;
+  }
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError(null);
+
+    try {
+      await login({ email, password });
+    } catch (submitError) {
+      setError(submitError instanceof Error ? submitError.message : "로그인에 실패했습니다.");
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-[var(--in-shell-bg)] px-6 py-12 text-[var(--in-text)]" style={inThemeVars(inTheme)}>
+      <div className="mx-auto grid max-w-6xl gap-10 lg:grid-cols-[1.05fr_430px] lg:items-center">
+        <div>
+          <p className="inline-flex rounded-full bg-[var(--in-accent-soft)] px-4 py-2 text-sm font-semibold text-[var(--in-accent)]">
+            IN operator workspace
+          </p>
+          <h1 className="mt-6 text-5xl font-black tracking-[-0.05em]">상담 흐름과 운영 상태를 동시에 여는 로그인 템플릿</h1>
+          <p className="mt-5 max-w-xl text-lg leading-8 text-[var(--in-muted)]">
+            `VITE_API_BASE_URL/auth/login`으로 인증한 뒤 `auth/me`를 재호출해 권한과 사용자 surface를 맞춘다.
+          </p>
+        </div>
+
+        <Card className="p-7 shadow-[0_24px_70px_rgba(25,54,46,0.08)]">
+          <form className="space-y-5" onSubmit={handleSubmit}>
+            <div>
+              <p className="text-2xl font-black">Sign in to IN</p>
+              <p className="mt-2 text-sm text-[var(--in-muted)]">예시 계정은 `operator@example.com`이다.</p>
+            </div>
+
+            <label className="block space-y-2">
+              <span className="text-sm font-semibold">Email</span>
+              <Input type="email" value={email} onChange={(event) => setEmail(event.target.value)} required />
+            </label>
+
+            <label className="block space-y-2">
+              <span className="text-sm font-semibold">Password</span>
+              <Input type="password" value={password} onChange={(event) => setPassword(event.target.value)} required />
+            </label>
+
+            {error ? <p className="text-sm font-semibold text-[#c4663a]">{error}</p> : null}
+
+            <Button className="w-full" size="lg" type="submit" disabled={authenticating}>
+              {authenticating ? "Signing in..." : "Continue to IN"}
+            </Button>
+          </form>
+        </Card>
+      </div>
+    </div>
+  );
+}