agentic-dev 0.2.9 → 0.2.11

package/client/mobile/src/main.tsx

@@ -1,17 +0,0 @@
-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

@@ -1,172 +0,0 @@
-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

@@ -1,138 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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>
-  );
-}