@squadbase/vantage-template 0.0.1

package/ui-templates/table-focus-ja/lib/mock-data.ts

@@ -0,0 +1,69 @@
+import type { DetailRow, SummaryRow, TrendPoint } from "./types"
+
+export const detailRows: DetailRow[] = [
+  { id: "row-01", name: "項目1", owner: "担当者1", status: "active", category: "カテゴリ1", revenue: 111569, units: 630, margin: 24.7, updated: "2024-03-26" },
+  { id: "row-02", name: "項目2", owner: "担当者2", status: "active", category: "カテゴリ2", revenue: 64510, units: 1418, margin: 42.8, updated: "2024-03-24" },
+  { id: "row-03", name: "項目3", owner: "担当者3", status: "active", category: "カテゴリ3", revenue: 178768, units: 700, margin: 27.3, updated: "2024-03-29" },
+  { id: "row-04", name: "項目4", owner: "担当者4", status: "paused", category: "カテゴリ4", revenue: 108664, units: 541, margin: 27.4, updated: "2024-03-24" },
+  { id: "row-05", name: "項目5", owner: "担当者5", status: "draft", category: "カテゴリ5", revenue: 89259, units: 453, margin: 41.7, updated: "2024-03-25" },
+  { id: "row-06", name: "項目6", owner: "担当者6", status: "active", category: "カテゴリ1", revenue: 171912, units: 1271, margin: 35.2, updated: "2024-03-31" },
+  { id: "row-07", name: "項目7", owner: "担当者1", status: "active", category: "カテゴリ2", revenue: 46499, units: 1024, margin: 43.3, updated: "2024-03-18" },
+  { id: "row-08", name: "項目8", owner: "担当者2", status: "active", category: "カテゴリ3", revenue: 90305, units: 624, margin: 39.3, updated: "2024-03-20" },
+  { id: "row-09", name: "項目9", owner: "担当者3", status: "paused", category: "カテゴリ4", revenue: 123575, units: 804, margin: 49.1, updated: "2024-03-27" },
+  { id: "row-10", name: "項目10", owner: "担当者4", status: "draft", category: "カテゴリ5", revenue: 191742, units: 2477, margin: 29.4, updated: "2024-03-26" },
+  { id: "row-11", name: "項目11", owner: "担当者5", status: "active", category: "カテゴリ1", revenue: 174313, units: 682, margin: 25.1, updated: "2024-03-26" },
+  { id: "row-12", name: "項目12", owner: "担当者6", status: "active", category: "カテゴリ2", revenue: 140422, units: 592, margin: 26.2, updated: "2024-03-21" },
+  { id: "row-13", name: "項目13", owner: "担当者1", status: "active", category: "カテゴリ3", revenue: 171059, units: 765, margin: 39.3, updated: "2024-03-26" },
+  { id: "row-14", name: "項目14", owner: "担当者2", status: "paused", category: "カテゴリ4", revenue: 127951, units: 542, margin: 20.4, updated: "2024-03-20" },
+  { id: "row-15", name: "項目15", owner: "担当者3", status: "draft", category: "カテゴリ5", revenue: 169122, units: 1824, margin: 19.8, updated: "2024-03-20" },
+  { id: "row-16", name: "項目16", owner: "担当者4", status: "active", category: "カテゴリ1", revenue: 91117, units: 479, margin: 30.2, updated: "2024-03-21" },
+  { id: "row-17", name: "項目17", owner: "担当者5", status: "active", category: "カテゴリ2", revenue: 57885, units: 249, margin: 46.5, updated: "2024-03-21" },
+  { id: "row-18", name: "項目18", owner: "担当者6", status: "active", category: "カテゴリ3", revenue: 156340, units: 1804, margin: 19.5, updated: "2024-03-27" },
+  { id: "row-19", name: "項目19", owner: "担当者1", status: "paused", category: "カテゴリ4", revenue: 58582, units: 471, margin: 23.5, updated: "2024-03-31" },
+  { id: "row-20", name: "項目20", owner: "担当者2", status: "draft", category: "カテゴリ5", revenue: 70782, units: 411, margin: 28.7, updated: "2024-03-19" },
+  { id: "row-21", name: "項目21", owner: "担当者3", status: "active", category: "カテゴリ1", revenue: 48743, units: 334, margin: 46.3, updated: "2024-03-18" },
+  { id: "row-22", name: "項目22", owner: "担当者4", status: "active", category: "カテゴリ2", revenue: 180121, units: 1042, margin: 40.5, updated: "2024-03-18" },
+  { id: "row-23", name: "項目23", owner: "担当者5", status: "active", category: "カテゴリ3", revenue: 113309, units: 562, margin: 20.4, updated: "2024-03-19" },
+  { id: "row-24", name: "項目24", owner: "担当者6", status: "paused", category: "カテゴリ4", revenue: 112999, units: 574, margin: 25.8, updated: "2024-03-27" },
+]
+
+export const summaryRows: SummaryRow[] = [
+  { segment: "カテゴリ3", count: 5, revenue: 709781, avgMargin: 29.2, share: 0.2491 },
+  { segment: "カテゴリ1", count: 5, revenue: 597654, avgMargin: 32.3, share: 0.2097 },
+  { segment: "カテゴリ4", count: 5, revenue: 531771, avgMargin: 29.2, share: 0.1866 },
+  { segment: "カテゴリ5", count: 4, revenue: 520905, avgMargin: 29.9, share: 0.1828 },
+  { segment: "カテゴリ2", count: 5, revenue: 489437, avgMargin: 39.9, share: 0.1718 },
+]
+
+export const trendSeries: TrendPoint[] = [
+  { date: "2024-03-02", value: 20590 },
+  { date: "2024-03-03", value: 19289 },
+  { date: "2024-03-04", value: 23339 },
+  { date: "2024-03-05", value: 20609 },
+  { date: "2024-03-06", value: 23415 },
+  { date: "2024-03-07", value: 25849 },
+  { date: "2024-03-08", value: 25114 },
+  { date: "2024-03-09", value: 22860 },
+  { date: "2024-03-10", value: 24511 },
+  { date: "2024-03-11", value: 24606 },
+  { date: "2024-03-12", value: 26125 },
+  { date: "2024-03-13", value: 21827 },
+  { date: "2024-03-14", value: 27583 },
+  { date: "2024-03-15", value: 23709 },
+  { date: "2024-03-16", value: 26295 },
+  { date: "2024-03-17", value: 24547 },
+  { date: "2024-03-18", value: 24112 },
+  { date: "2024-03-19", value: 28416 },
+  { date: "2024-03-20", value: 23997 },
+  { date: "2024-03-21", value: 23835 },
+  { date: "2024-03-22", value: 24690 },
+  { date: "2024-03-23", value: 28432 },
+  { date: "2024-03-24", value: 25377 },
+  { date: "2024-03-25", value: 29616 },
+  { date: "2024-03-26", value: 28354 },
+  { date: "2024-03-27", value: 25239 },
+  { date: "2024-03-28", value: 27696 },
+  { date: "2024-03-29", value: 26262 },
+  { date: "2024-03-30", value: 25920 },
+  { date: "2024-03-31", value: 27428 },
+]

package/ui-templates/table-focus-ja/lib/types.ts

@@ -0,0 +1,24 @@
+export interface DetailRow {
+  id: string
+  name: string
+  owner: string
+  status: "active" | "paused" | "draft"
+  category: string
+  revenue: number
+  units: number
+  margin: number
+  updated: string
+}
+
+export interface SummaryRow {
+  segment: string
+  count: number
+  revenue: number
+  avgMargin: number
+  share: number
+}
+
+export interface TrendPoint {
+  date: string
+  value: number
+}

package/ui-templates/table-focus-ja/manifest.json

@@ -0,0 +1,11 @@
+{
+  "name": "table-focus-ja",
+  "description": "[日本語] テーブル重視 — ヘッダーに検索+エクスポート、ステータスフィルタチップ、詳細テーブル(24行以上、ソート可)を主役とし、右サイドにトレンドチャートとセグメント内訳を配置する作業画面構成",
+  "version": "0.1.0",
+  "files": [
+    { "src": "pages/index.tsx", "dest": "index.tsx", "action": "replace" },
+    { "src": "components/detail-table.tsx", "dest": "components/table-focus/detail-table.tsx", "action": "add" },
+    { "src": "lib/mock-data.ts", "dest": "components/table-focus/mock-data.ts", "action": "add", "relabel": false },
+    { "src": "lib/types.ts", "dest": "components/table-focus/types.ts", "action": "add", "relabel": false }
+  ]
+}

package/ui-templates/table-focus-ja/pages/index.tsx

@@ -0,0 +1,180 @@
+import { useMemo, useState } from "react"
+import { Download, Search } from "lucide-react"
+
+import { definePage } from "@squadbase/vantage"
+import {
+  DashboardCardPreset,
+  EChart,
+  PageShell,
+  PageShellContent,
+  PageShellDescription,
+  PageShellHeader,
+  PageShellHeaderEnd,
+  PageShellHeading,
+  PageShellTitle,
+  Placeholder,
+  type EChartsOption,
+} from "@squadbase/vantage/components"
+import { Button, Input, ToggleGroup, ToggleGroupItem } from "@squadbase/vantage/ui"
+
+import { DetailTable } from "./components/table-focus/detail-table"
+import {
+  detailRows,
+  summaryRows,
+  trendSeries,
+} from "./components/table-focus/mock-data"
+import type { DetailRow, TrendPoint } from "./components/table-focus/types"
+
+export const page = definePage({
+  title: "レコード",
+  description:
+    "ヘッダーに検索+エクスポート、ステータスフィルタチップ、ソート可能な詳細テーブルを主役とし、右サイドにトレンドチャートとセグメント内訳を配置する作業画面構成。",
+})
+
+// ── chart helpers ───────────────────────────────────────────────────────────
+
+function getBaseGrid() {
+  return { left: "3%", right: "4%", bottom: "10%", containLabel: true }
+}
+
+function formatNumber(n: number): string {
+  const sign = n < 0 ? "-" : ""
+  const abs = Math.abs(n)
+  if (abs >= 100_000_000) return `${sign}${(abs / 100_000_000).toFixed(1)}億`
+  if (abs >= 10_000) return `${sign}${(abs / 10_000).toFixed(0)}万`
+  return n.toLocaleString("ja-JP")
+}
+
+// ── chart options ────────────────────────────────────────────────────────────
+
+function trendOption(data: TrendPoint[]): EChartsOption {
+  return {
+    tooltip: { trigger: "axis" },
+    legend: { bottom: 0 },
+    grid: getBaseGrid(),
+    xAxis: {
+      type: "category",
+      data: data.map((d) => d.date),
+      boundaryGap: false,
+      axisLabel: { formatter: (v: string) => v.slice(5) },
+    },
+    yAxis: { type: "value", axisLabel: { formatter: (v: number) => formatNumber(v) } },
+    series: [
+      {
+        name: "系列A",
+        type: "line",
+        smooth: true,
+        showSymbol: false,
+        data: data.map((d) => d.value),
+        areaStyle: { opacity: 0.18 },
+      },
+    ],
+  }
+}
+
+// ── page ─────────────────────────────────────────────────────────────────────
+
+type StatusFilter = "all" | DetailRow["status"]
+
+export default function HomePage() {
+  const [query, setQuery] = useState("")
+  const [status, setStatus] = useState<StatusFilter>("all")
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    return detailRows.filter((r) => {
+      if (status !== "all" && r.status !== status) return false
+      if (q && !r.name.toLowerCase().includes(q) && !r.owner.toLowerCase().includes(q)) return false
+      return true
+    })
+  }, [query, status])
+
+  return (
+    <PageShell>
+      <PageShellHeader>
+        <PageShellHeading>
+          <PageShellTitle>[テンプレート] レコード</PageShellTitle>
+          <PageShellDescription>
+            全レコードを閲覧・絞り込み・検索できます。
+          </PageShellDescription>
+        </PageShellHeading>
+        <PageShellHeaderEnd className="flex-row items-center gap-2">
+          <div className="relative">
+            <Search className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="検索..."
+              className="h-9 w-64 pl-8"
+            />
+          </div>
+          <Button variant="outline" size="sm" className="gap-1.5">
+            <Download className="size-4" />
+          </Button>
+        </PageShellHeaderEnd>
+      </PageShellHeader>
+
+      <PageShellContent className="space-y-4">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          {/* Base UI の ToggleGroup は単一選択でも value が配列 */}
+          <ToggleGroup
+            value={[status]}
+            onValueChange={(values) => {
+              const next = values[0]
+              if (next) setStatus(next as StatusFilter)
+            }}
+            variant="outline"
+            size="sm"
+          >
+            <ToggleGroupItem value="all">すべて</ToggleGroupItem>
+            <ToggleGroupItem value="active">選択肢A</ToggleGroupItem>
+            <ToggleGroupItem value="paused">選択肢B</ToggleGroupItem>
+            <ToggleGroupItem value="draft">選択肢C</ToggleGroupItem>
+          </ToggleGroup>
+          <span className="text-xs text-muted-foreground">
+            {filtered.length} 件
+          </span>
+        </div>
+
+        <div className="grid gap-4 lg:grid-cols-3">
+          <div className="lg:col-span-2">
+            <DashboardCardPreset
+              title="レコード"
+              description="現在のフィルタに該当する行"
+            >
+              <DetailTable data={filtered} />
+            </DashboardCardPreset>
+          </div>
+          <div className="space-y-4">
+            <DashboardCardPreset
+              title="トレンド"
+              description="選択期間の値"
+            >
+              <EChart option={trendOption(trendSeries)} height="220px" />
+            </DashboardCardPreset>
+            <DashboardCardPreset title="セグメント別" description="全体に占める割合">
+              <div className="space-y-3">
+                {summaryRows.map((row) => (
+                  <div key={row.segment} className="space-y-1.5">
+                    <div className="flex items-baseline justify-between">
+                      <span className="text-sm font-medium">{row.segment}</span>
+                      <Placeholder className="text-sm">
+                        {row.revenue.toLocaleString("ja-JP")}
+                      </Placeholder>
+                    </div>
+                    <div className="h-1.5 overflow-hidden rounded-full bg-muted">
+                      <div
+                        className="h-full rounded-full bg-primary"
+                        style={{ width: `${(row.share * 100).toFixed(1)}%` }}
+                      />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </DashboardCardPreset>
+          </div>
+        </div>
+      </PageShellContent>
+    </PageShell>
+  )
+}