core-system-frontend/src/features/form/components/AdminFormsPage.tsx at f264a0a93ceab5015017c45c2ff9137bc9b7f6cc · NYCU-SDC/core-system-frontend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
import { AdminLayout } from "@/layouts";
import { Button } from "@/shared/components";
import { Plus } from "lucide-react";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import styles from "./AdminFormsPage.module.css";
import { StatusTag, type StatusVariant } from "./StatusTag";
import { TabButtons } from "./TabButtons";
// import {getInboxMessages} from "@nycu-sdc/core-system-sdk";
// Mock data
const mockForms: { id: string; title: string; lastEdited: string; responses: number; status: StatusVariant; deadline: string }[] = [
	{
		id: "form-1",
		title: "114 fall Full-stack",
		lastEdited: "2025/12/25",
		responses: 5,
		status: "published",
		deadline: "2025/12/31"
	},
	{
		id: "form-2",
		title: "114 fall Full-stack intro training advancedddddddddddd",
		lastEdited: "2025/12/25",
		responses: 5,
		status: "draft",
		deadline: "2025/12/31"
	},
	{
		id: "form-3",
		title: "Full Stack Intro 11/5 課程回饋",
		lastEdited: "2025/12/25",
		responses: 5,
		status: "draft",
		deadline: "2025/12/31"
	},
	{
		id: "form-4",
		title: "Full Stack Intro 11/5 課程回饋",
		lastEdited: "2025/12/25",
		responses: 5,
		status: "done",
		deadline: "2025/12/31"
	},
	{
		id: "form-5",
		title: "114 fall Full-stack intro training advanced",
		lastEdited: "2025/12/25",
		responses: 5,
		status: "published",
		deadline: "2025/12/31"
	},
	{
		id: "form-6",
		title: "114 fall Full-stack intro training advanced",
		lastEdited: "2025/12/25",
		responses: 5,
		status: "draft",
		deadline: "2025/12/31"
	},
	{
		id: "form-7",
		title: "Full Stack Intro 11/5 課程回饋",
		lastEdited: "2025/12/25",
		responses: 5,
		status: "draft",
		deadline: "2025/12/31"
	},
	{
		id: "form-8",
		title: "Full Stack Intro 11/5 課程回饋",
		lastEdited: "2025/12/25",
		responses: 5,
		status: "done",
		deadline: "2025/12/31"
	}
];

export const AdminFormsPage = () => {
	const navigate = useNavigate();
	const [activeTab, setActiveTab] = useState("all");

	const handleFormClick = (formId: string) => {
		navigate(`/orgs/sdc/forms/${formId}/info`);
	};

	const handleCreateForm = () => {
		console.log("Create new form");
	};

	return (
		<AdminLayout>
			<div className={styles.container}>
				<div className={styles.header}>
					<h1 className={styles.title}>表單</h1>
					<div className={styles.options}>
						<TabButtons
							tabs={[
								{ value: "all", label: "所有表單" },
								{ value: "published", label: "草稿" },
								{ value: "draft", label: "已發布" },
								{ value: "ended", label: "已截止" }
							]}
							activeTab={activeTab}
							onTabChange={setActiveTab}
						/>
						<Button icon={Plus} onClick={handleCreateForm}>
							建立表單
						</Button>
					</div>
				</div>

				{mockForms.length > 0 ? (
					<div className={styles.grid}>
						{mockForms.map(form => (
							<div key={form.id} className={styles.card} onClick={() => handleFormClick(form.id)}>
								<div className={styles.cardHeader}>
									<h4 className={styles.cardTitle}>{form.title}</h4>
									<StatusTag variant={form.status} showDot />
								</div>
								<div className={styles.cardInfo}>
									<span>Last edited: {form.lastEdited}</span>
									<span>{form.responses} responses</span>
									<span>Deadline: {form.deadline}</span>
								</div>
							</div>
						))}
					</div>
				) : (
					<div className={styles.empty}>
						<p>No forms created yet</p>
					</div>
				)}
			</div>
		</AdminLayout>
	);
};