Fix sidebar height on large screens #10
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
**User:**
<task>
- コメントの送信時や，いいね/いいね解除のアクション時は，firestore の likes, comments コレクションに保存して永続化してください
- いいねボタンやコメント送信ボタンが押されても，一切ネットワークにリクエストを送っていません
- そのため，likes や comments に書き込まれていません
- 原因を特定し，改善してください
- budgets コレクションは問題なく，CRUD できているので，クレデンシャルの問題ではないです
</task>
<environment_details>
# VSCode Visible Files
front/src/app/page.tsx
# VSCode Open Tabs
front/src/data/japan/2025/revenue.json,front/src/data/japan/2025/expenditure.json,front/src/components/BudgetChart.tsx,front/src/app/page.tsx,front/src/app/providers.tsx
# Current Time
7/6/2025, 4:53:34 PM (Asia/Tokyo, UTC+9:00)
# Current Cost
$0.00
# Current Mode
<slug>code</slug>
<name>💻 Code</name>
<model>claude-sonnet-4</model>
# Current Workspace Directory (/Users/taniiicom/projects/budget-simulator) Files
front/
front/.gitignore
front/eslint.config.mjs
front/next.config.ts
front/package-lock.json
front/package.json
front/postcss.config.js
front/README.md
front/tailwind.config.js
front/tsconfig.json
front/public/
front/public/file.svg
front/public/globe.svg
front/public/next.svg
front/public/vercel.svg
front/public/window.svg
front/src/
front/src/app/
front/src/app/globals.css
front/src/app/layout.tsx
front/src/app/page.tsx
front/src/app/providers.tsx
front/src/app/idea/
front/src/app/idea/[id]/
front/src/app/idea/[id]/page.tsx
front/src/app/login/
front/src/app/login/page.tsx
front/src/components/
front/src/components/BudgetChart.tsx
front/src/components/Footer.tsx
front/src/data/
front/src/data/japan/
front/src/data/japan/2025/
front/src/data/japan/2025/expenditure.json
front/src/data/japan/2025/revenue.json
front/src/lib/
front/src/lib/auth.tsx
front/src/lib/firebase.ts
research/
research/japan/
research/japan/README.md
research/japan/2025/
research/japan/2025/expenditure/
research/japan/2025/expenditure/expenditure.json
research/japan/2025/expenditure/shift_jis.xml
research/japan/2025/expenditure/utf8.xml
research/japan/2025/expenditure/original/
research/japan/2025/expenditure/original/全画面表示 - 令和7年度 一般会計予算 当初予算.xml
research/japan/2025/revenue/
research/japan/2025/revenue/revenue.json
research/japan/2025/revenue/shift_jis.xml
research/japan/2025/revenue/utf8.xml
research/japan/2025/revenue/original/
research/japan/2025/revenue/original/全画面表示 - 令和7年度 一般会計予算 当初予算_歳入.xml
</environment_details>
---
**Assistant:**
<thinking>
ユーザーの問題を理解しました：
1. コメント送信時やいいね/いいね解除のアクション時に、Firestoreのlikes, commentsコレクションに保存されていない
2. いいねボタンやコメント送信ボタンが押されても、ネットワークにリクエストが送られていない
3. budgetsコレクションは正常にCRUDできているので、Firestoreの認証に問題はない
まず、現在のコードベースを理解するために、以下を確認する必要があります：
1. いいねやコメント機能が実装されているファイルを特定
2. Firestore関連の設定とコード
3. 現在の実装で何が問題なのかを特定
lib以下のディレクトリ構造に従ってアーキテクトする必要があるとのことなので、まずlib配下とコンポーネントを確認します。
</thinking>
現在のコードベースを確認して、いいねやコメント機能の実装状況とFirestore連携の問題を特定します。まず、lib配下とコンポーネントの構造を確認しましょう。
<read_file>
<args>
<file>
<path>front/src/lib</path>
</file>
</args>
</read_file>
---
**User:**
[read_file for 'front/src/lib'. Reading multiple files at once is more efficient for the LLM. If other files are relevant to your current task, please read them simultaneously.] Result:
The tool execution failed with the following error:
<error>
Error reading file front/src/lib: {"name":"Error","message":"Path provided was not a file!","stack":"Error: Path provided was not a file!\n at YRr (/Users/taniiicom/.vscode/extensions/rooveterinaryinc.roo-cline-3.22.6/dist/extension.js:463:5258)\n at T$i (/Users/taniiicom/.vscode/extensions/rooveterinaryinc.roo-cline-3.22.6/dist/extension.js:463:3893)\n at async Promise.all (index 1)\n at Mmi (/Users/taniiicom/.vscode/extensions/rooveterinaryinc.roo-cline-3.22.6/dist/extension.js:4529:6286)\n at yre (/Users/taniiicom/.vscode/extensions/rooveterinaryinc.roo-cline-3.22.6/dist/extension.js:4687:1498)"}
</error>
[read_file for 'front/src/lib'. Reading multiple files at once is more efficient for the LLM. If other files are relevant to your current task, please read them simultaneously.] Result:
<files>
<file><path>front/src/lib</path><error>Error reading file: Path provided was not a file!</error></file>
</files>
<environment_details>
# VSCode Visible Files
front/src/app/page.tsx
# VSCode Open Tabs
front/src/data/japan/2025/revenue.json,front/src/data/japan/2025/expenditure.json,front/src/components/BudgetChart.tsx,front/src/app/page.tsx,front/src/app/providers.tsx
# Current Time
7/6/2025, 4:53:48 PM (Asia/Tokyo, UTC+9:00)
# Current Cost
$0.00
# Current Mode
<slug>code</slug>
<name>💻 Code</name>
<model>claude-sonnet-4</model>
</environment_details>
---
**Assistant:**
<read_file>
<args>
<file>
<path>front/src/lib/firebase.ts</path>
</file>
<file>
<path>front/src/lib/auth.tsx</path>
</file>
<file>
<path>front/src/components/BudgetChart.tsx</path>
</file>
<file>
<path>front/src/app/page.tsx</path>
</file>
<file>
<path>front/src/app/idea/[id]/page.tsx</path>
</file>
</args>
</read_file>
---
**User:**
[read_file for 5 files] Result:
<files>
<file><path>front/src/lib/firebase.ts</path>
<content lines="1-16">
1 | import { initializeApp } from "firebase/app";
2 | import { getAuth } from "firebase/auth";
3 | import { getFirestore } from "firebase/firestore";
4 |
5 | const firebaseConfig = {
6 | apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
7 | authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
8 | projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
9 | storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
10 | messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
11 | appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
12 | };
13 |
14 | const app = initializeApp(firebaseConfig);
15 | export const auth = getAuth(app);
16 | export const db = getFirestore(app, 'yosanorg');
</content>
</file>
<file><path>front/src/lib/auth.tsx</path>
<content lines="1-155">
1 | 'use client'
2 |
3 | import { createContext, useContext, useEffect, useState } from 'react';
4 | import {
5 | Modal,
6 | ModalOverlay,
7 | ModalContent,
8 | ModalHeader,
9 | ModalBody,
10 | ModalFooter,
11 | Button,
12 | useDisclosure,
13 | } from '@chakra-ui/react';
14 | import {
15 | User,
16 | onAuthStateChanged,
17 | signInWithPopup,
18 | GoogleAuthProvider,
19 | TwitterAuthProvider,
20 | AuthCredential,
21 | signOut,
22 | fetchSignInMethodsForEmail,
23 | linkWithCredential,
24 | updateProfile,
25 | } from 'firebase/auth';
26 | import type { FirebaseError } from 'firebase/app';
27 | import { auth } from './firebase';
28 |
29 | interface AuthContextType {
30 | user: User | null;
31 | loginGoogle: () => Promise<void>;
32 | loginTwitter: () => Promise<void>;
33 | logout: () => Promise<void>;
34 | updateUsername: (name: string) => Promise<void>;
35 | }
36 |
37 | const AuthContext = createContext<AuthContextType>({
38 | user: null,
39 | loginGoogle: async () => {},
40 | loginTwitter: async () => {},
41 | logout: async () => {},
42 | updateUsername: async () => {},
43 | });
44 |
45 | export const useAuth = () => useContext(AuthContext);
46 |
47 | export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
48 | const [user, setUser] = useState<User | null>(null);
49 | const [pendingCred, setPendingCred] = useState<AuthCredential | null>(null);
50 | const [mergeProvider, setMergeProvider] = useState<'google.com' | 'twitter.com' | null>(null);
51 | const { isOpen, onOpen, onClose } = useDisclosure();
52 |
53 | useEffect(() => {
54 | return onAuthStateChanged(auth, (u) => setUser(u));
55 | }, []);
56 |
57 |
58 | const handleMerge = async (error: FirebaseError) => {
59 | const email = error?.customData?.email as string | undefined;
60 | const cred =
61 | GoogleAuthProvider.credentialFromError(error) ||
62 | TwitterAuthProvider.credentialFromError(error);
63 | if (!email || !cred) return;
64 | const methods = await fetchSignInMethodsForEmail(auth, email);
65 | if (methods.includes('google.com')) {
66 | setMergeProvider('google.com');
67 | setPendingCred(cred);
68 | onOpen();
69 | } else if (methods.includes('twitter.com')) {
70 | setMergeProvider('twitter.com');
71 | setPendingCred(cred);
72 | onOpen();
73 | }
74 | };
75 |
76 | const proceedMerge = async () => {
77 | if (!pendingCred || !mergeProvider) return;
78 | try {
79 | const provider =
80 | mergeProvider === 'google.com'
81 | ? new GoogleAuthProvider()
82 | : new TwitterAuthProvider();
83 | const { user } = await signInWithPopup(auth, provider);
84 | await linkWithCredential(user, pendingCred);
85 | setPendingCred(null);
86 | setMergeProvider(null);
87 | } catch (e) {
88 | console.error(e);
89 | } finally {
90 | onClose();
91 | }
92 | };
93 |
94 | const loginGoogle = async () => {
95 | try {
96 | await signInWithPopup(auth, new GoogleAuthProvider());
97 | } catch (e) {
98 | const err = e as FirebaseError;
99 | if (err.code === 'auth/account-exists-with-different-credential') {
100 | await handleMerge(err);
101 | } else {
102 | console.error(err);
103 | }
104 | }
105 | };
106 |
107 | const loginTwitter = async () => {
108 | try {
109 | await signInWithPopup(auth, new TwitterAuthProvider());
110 | } catch (e) {
111 | const err = e as FirebaseError;
112 | if (err.code === 'auth/account-exists-with-different-credential') {
113 | await handleMerge(err);
114 | } else {
115 | console.error(err);
116 | }
117 | }
118 | };
119 |
120 | const logout = async () => {
121 | await signOut(auth);
122 | };
123 |
124 | const updateUsername = async (name: string) => {
125 | if (auth.currentUser) {
126 | await updateProfile(auth.currentUser, { displayName: name });
127 | setUser({ ...auth.currentUser });
128 | }
129 | };
130 |
131 | return (
132 | <AuthContext.Provider value={{ user, loginGoogle, loginTwitter, logout, updateUsername }}>
133 | {children}
134 | <Modal isOpen={isOpen} isCentered>
135 | <ModalOverlay />
136 | <ModalContent>
137 | <ModalHeader>既存アカウントにログイン</ModalHeader>
138 | <ModalBody>
139 | {mergeProvider === 'google.com'
140 | ? '既に Google で登録済みです。Google でログインして続行してください。'
141 | : '既に Twitter で登録済みです。Twitter でログインして続行してください。'}
142 | </ModalBody>
143 | <ModalFooter>
144 | <Button colorScheme="blue" mr={3}
145 | {mergeProvider === 'google.com' ? 'Googleでログイン' : 'Twitterでログイン'}
146 | </Button>
147 | <Button variant="ghost"
148 | キャンセル
149 | </Button>
150 | </ModalFooter>
151 | </ModalContent>
152 | </Modal>
153 | </AuthContext.Provider>
154 | );
155 | };
</content>
</file>
<file><path>front/src/components/BudgetChart.tsx</path>
<content lines="1-500">
1 | "use client";
2 |
3 | import React, { useState, useCallback, useMemo, useRef } from "react";
4 | import { Doughnut } from "react-chartjs-2";
5 | import { motion } from "framer-motion";
6 | import { Chart as ChartJS, ArcElement, Tooltip, Legend, Title } from "chart.js";
7 | import {
8 | Box,
9 | Flex,
10 | Text,
11 | IconButton,
12 | Breadcrumb,
13 | BreadcrumbItem,
14 | BreadcrumbLink,
15 | SimpleGrid,
16 | Input,
17 | NumberInput,
18 | NumberInputField,
19 | NumberInputStepper,
20 | NumberIncrementStepper,
21 | NumberDecrementStepper,
22 | Button,
23 | AlertDialog,
24 | AlertDialogBody,
25 | AlertDialogFooter,
26 | AlertDialogHeader,
27 | AlertDialogContent,
28 | AlertDialogOverlay,
29 | useDisclosure,
30 | } from "@chakra-ui/react";
31 |
32 | ChartJS.register(ArcElement, Tooltip, Legend, Title);
33 |
34 | interface ChartData {
35 | name: string;
36 | value: number;
37 | children?: Record<string, unknown>;
38 | color: string;
39 | }
40 |
41 | interface DrillPath {
42 | name: string;
43 | level: number;
44 | }
45 |
46 | const generateColorPalette = (count: number) => {
47 | // Beautiful modern color palette
48 | const baseColors = [
49 | "#FF6B6B",
50 | "#4ECDC4",
51 | "#45B7D1",
52 | "#96CEB4",
53 | "#FFEAA7",
54 | "#DDA0DD",
55 | "#98D8C8",
56 | "#F7DC6F",
57 | "#BB8FCE",
58 | "#85C1E9",
59 | "#F8C471",
60 | "#82E0AA",
61 | "#F1948A",
62 | "#AED6F1",
63 | "#A3E4D7",
64 | "#F9E79F",
65 | "#D5A6BD",
66 | "#A9DFBF",
67 | "#F5B7B1",
68 | "#D2B4DE",
69 | "#AED6F1",
70 | "#A3E4D7",
71 | "#F9E79F",
72 | "#A9DFBF",
73 | ];
74 |
75 | if (count <= baseColors.length) {
76 | return baseColors.slice(0, count);
77 | }
78 |
79 | // Generate additional colors if needed
80 | const colors = [...baseColors];
81 | for (let i = baseColors.length; i < count; i++) {
82 | const hue = (360 / count) * i;
83 | const saturation = 60 + (i % 3) * 10; // Vary saturation
84 | const lightness = 60 + (i % 4) * 5; // Vary lightness
85 | colors.push(`hsl(${hue}, ${saturation}%, ${lightness}%)`);
86 | }
87 | return colors;
88 | };
89 |
90 | const processDataForChart = (data: Record<string, unknown>): ChartData[] => {
91 | if (!data) return [];
92 |
93 | const entries = Object.entries(data);
94 | const colors = generateColorPalette(entries.length);
95 |
96 | return entries
97 | .map(([key, value], index) => {
98 | if (typeof value === "number") {
99 | return {
100 | name: key,
101 | value,
102 | color: colors[index],
103 | };
104 | } else if (typeof value === "object" && value !== null) {
105 | const total = calculateTotal(value as Record<string, unknown>);
106 | return {
107 | name: key,
108 | value: total,
109 | children: value as Record<string, unknown>,
110 | color: colors[index],
111 | };
112 | }
113 | return {
114 | name: key,
115 | value: 0,
116 | color: colors[index],
117 | };
118 | })
119 | .filter((item) => item.value > 0);
120 | };
121 |
122 | const calculateTotal = (obj: Record<string, unknown>): number => {
123 | let total = 0;
124 |
125 | for (const value of Object.values(obj)) {
126 | if (typeof value === "number") {
127 | total += value;
128 | } else if (typeof value === "object" && value !== null) {
129 | total += calculateTotal(value as Record<string, unknown>);
130 | }
131 | }
132 |
133 | return total;
134 | };
135 |
136 | const formatCurrency = (value: number): string => {
137 | const trillion = Math.floor(value / 1000000000000);
138 | const billion = Math.floor((value % 1000000000000) / 100000000);
139 |
140 | if (trillion > 0) {
141 | return `${trillion.toLocaleString()}兆${
142 | billion > 0 ? `${billion.toLocaleString()}億` : ""
143 | }円`;
144 | } else if (billion > 0) {
145 | return `${billion.toLocaleString()}億円`;
146 | } else {
147 | const million = Math.floor(value / 1000);
148 | return `${million.toLocaleString()}万円`;
149 | }
150 | };
151 |
152 | interface InteractivePieChartProps {
153 | title: string;
154 | data: Record<string, unknown>;
155 | onEdit?: (
156 | op: "set" | "delete" | "add",
157 | path: string[],
158 | name?: string,
159 | value?: number
160 | ) => void;
161 | editable?: boolean;
162 | className?: string;
163 | }
164 |
165 | const InteractivePieChart: React.FC<InteractivePieChartProps> = ({
166 | title,
167 | data,
168 | onEdit,
169 | editable = true,
170 | className,
171 | }) => {
172 | const [drillPath, setDrillPath] = useState<DrillPath[]>([]);
173 | const [newName, setNewName] = useState("");
174 | const [newValue, setNewValue] = useState<number>(0);
175 | const [deleteTarget, setDeleteTarget] = useState<string[] | null>(null);
176 | const {
177 | isOpen: confirmOpen,
178 | onOpen: confirmOnOpen,
179 | onClose: confirmOnClose,
180 | } = useDisclosure();
181 | const cancelRef = useRef<HTMLButtonElement>(null);
182 | const currentObject = useMemo(() => {
183 | let current = data;
184 | for (const p of drillPath) {
185 | if (current[p.name] && typeof current[p.name] === "object") {
186 | current = current[p.name] as Record<string, unknown>;
187 | }
188 | }
189 | return current as Record<string, unknown>;
190 | }, [data, drillPath]);
191 | const pathNames = useMemo(() => drillPath.map((d) => d.name), [drillPath]);
192 |
193 | const currentData = useMemo(() => {
194 | return processDataForChart(currentObject);
195 | }, [currentObject]);
196 |
197 | const chartData = useMemo(() => {
198 | return {
199 | labels: currentData.map((item) => item.name),
200 | datasets: [
201 | {
202 | data: currentData.map((item) => item.value),
203 | backgroundColor: currentData.map((item) => item.color),
204 | borderWidth: 0,
205 | hoverBorderWidth: 0,
206 | hoverOffset: 0,
207 | },
208 | ],
209 | };
210 | }, [currentData]);
211 |
212 | const options = useMemo(
213 | () => ({
214 | responsive: true,
215 | maintainAspectRatio: false,
216 | plugins: {
217 | legend: {
218 | display: false,
219 | },
220 | tooltip: {
221 | callbacks: {
222 | label: (context: { dataIndex: number }) => {
223 | const dataIndex = context.dataIndex;
224 | const item = currentData[dataIndex];
225 | return `${item.name}: ${formatCurrency(item.value)}`;
226 | },
227 | },
228 | },
229 | },
230 | animation: {
231 | animateRotate: true,
232 | animateScale: true,
233 | duration: 800,
234 | },
235 | onClick: (_: unknown, elements: Array<{ index: number }>) => {
236 | if (elements.length > 0) {
237 | const index = elements[0].index;
238 | const item = currentData[index];
239 | if (item?.children) {
240 | setDrillPath((prev) => [
241 | ...prev,
242 | { name: item.name, level: prev.length },
243 | ]);
244 | }
245 | }
246 | },
247 | }),
248 | [currentData]
249 | );
250 |
251 | const handleBreadcrumbClick = useCallback((index: number) => {
252 | setDrillPath((prev) => prev.slice(0, index + 1));
253 | }, []);
254 |
255 | const goBack = useCallback(() => {
256 | setDrillPath((prev) => prev.slice(0, -1));
257 | }, []);
258 |
259 | return (
260 | <motion.div
261 | initial={{ opacity: 0, scale: 0.9 }}
262 | animate={{ opacity: 1, scale: 1 }}
263 | transition={{ duration: 0.5 }}
264 | >
265 | <Box
266 | bg="white"
267 | borderWidth="1px"
268 | borderColor="gray.200"
269 | _dark={{ bg: "gray.800", borderColor: "gray.700" }}
270 | rounded="2xl"
271 | p={6}
272 | shadow="sm"
273 | className={className}
274 | >
275 | <Flex justify="space-between" mb={{ base: 6, sm: 8 }}>
276 | <Flex align="center" gap={{ base: 3, sm: 4 }} minW={0}>
277 | <Flex
278 | w={{ base: 10, sm: 12 }}
279 | h={{ base: 10, sm: 12 }}
280 | align="center"
281 | justify="center"
282 | bgGradient="linear(to-br, blue.500, purple.500)"
283 | color="white"
284 | rounded={{ base: "xl", sm: "2xl" }}
285 | shadow="sm"
286 | flexShrink={0}
287 | >
288 | <svg
289 | width="24"
290 | height="24"
291 | viewBox="0 0 24 24"
292 | fill="none"
293 | stroke="currentColor"
294 | >
295 | {title === "歳入" ? (
296 | <path
297 | strokeLinecap="round"
298 | strokeLinejoin="round"
299 | strokeWidth={2}
300 | d="M12 6v6m0 0v6m0-6h6m-6 0H6"
301 | />
302 | ) : (
303 | <path
304 | strokeLinecap="round"
305 | strokeLinejoin="round"
306 | strokeWidth={2}
307 | d="M20 12H4"
308 | />
309 | )}
310 | </svg>
311 | </Flex>
312 | <Text
313 | fontSize={{ base: "lg", sm: "xl", lg: "2xl", xl: "3xl" }}
314 | fontWeight="bold"
315 | bgGradient="linear(to-r, gray.800, gray.600)"
316 | bgClip="text"
317 | noOfLines={1}
318 | >
319 | {title}
320 | </Text>
321 | </Flex>
322 | {drillPath.length > 0 && (
323 | <IconButton
324 | aria-label="戻る"
325 |
326 | icon={
327 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="gray">
328 | <path
329 | strokeLinecap="round"
330 | strokeLinejoin="round"
331 | strokeWidth={2}
332 | d="M10 19l-7-7m0 0l7-7m-7 7h18"
333 | />
334 | </svg>
335 | }
336 | variant="solid"
337 | colorScheme="purple"
338 | rounded="full"
339 | size="lg"
340 | as={motion.button}
341 | whileHover={{ scale: 1.1 }}
342 | whileTap={{ scale: 0.9 }}
343 | shadow="sm"
344 | />
345 | )}
346 | </Flex>
347 |
348 | {drillPath.length > 0 && (
349 | <motion.nav
350 | initial={{ opacity: 0, height: 0 }}
351 | animate={{ opacity: 1, height: "auto" }}
352 | transition={{ duration: 0.3 }}
353 | >
354 | <Breadcrumb
355 | mb={{ base: 6, sm: 8 }}
356 | px={3}
357 | py={3}
358 | rounded={{ base: "xl", sm: "2xl" }}
359 | fontSize={{ base: "xs", sm: "sm" }}
360 | bg="gray.50"
361 | borderWidth="1px"
362 | borderColor="gray.200"
363 | _dark={{ bg: "gray.700", borderColor: "gray.600" }}
364 | separator={<Text mx={2} color="gray.400">/</Text>}
365 | >
366 | <BreadcrumbItem>
367 | <BreadcrumbLink => setDrillPath([])}>トップ</BreadcrumbLink>
368 | </BreadcrumbItem>
369 | {drillPath.map((path, index) => (
370 | <BreadcrumbItem key={index}>
371 | <BreadcrumbLink => handleBreadcrumbClick(index)} maxW={{ base: 32, sm: 48 }} isTruncated>
372 | {path.name}
373 | </BreadcrumbLink>
374 | </BreadcrumbItem>
375 | ))}
376 | </Breadcrumb>
377 | </motion.nav>
378 | )}
379 |
380 | <Flex
381 | h={{ base: 72, sm: 80, lg: 96, xl: 420 }}
382 | align="center"
383 | justify="center"
384 | bg="gray.50"
385 | borderWidth="1px"
386 | borderColor="gray.200"
387 | _dark={{ bg: "gray.800", borderColor: "gray.700" }}
388 | rounded={{ base: "xl", sm: "2xl" }}
389 | >
390 | <Box w="full" h="full" p={{ base: 3, sm: 4, lg: 6 }}>
391 | <Doughnut data={chartData} options={options} />
392 | </Box>
393 | </Flex>
394 |
395 | <SimpleGrid
396 | mt={8}
397 | columns={{ base: 1, sm: 2, md: 2, lg: 2, xl: 2 }}
398 | gap={{ base: 4, sm: 5 }}
399 | justifyItems="center"
400 | >
401 | {currentData.map((entry, index) => {
402 | const raw = currentObject[entry.name];
403 | const isNumber = typeof raw === "number";
404 | return (
405 | <motion.div
406 | key={index}
407 | whileHover={{ scale: 1.02 }}
408 | whileTap={{ scale: 0.98 }}
409 | style={{ width: "100%" }}
410 | >
411 | <Flex
412 | p={{ base: 4, sm: 5 }}
413 | rounded={{ base: "lg", sm: "xl" }}
414 | bg="gray.100"
415 | borderWidth="1px"
416 | borderColor="gray.200"
417 | _dark={{ bg: "gray.700", borderColor: "gray.600" }}
418 | align="center"
419 | >
420 | <Box
421 | w={{ base: 4, sm: 5 }}
422 | h={{ base: 4, sm: 5 }}
423 | rounded="full"
424 | mr={{ base: 3, sm: 4 }}
425 | flexShrink={0}
426 | shadow="sm"
427 | style={{ backgroundColor: entry.color }}
428 | />
429 | <Box flex="1" minW={0} => entry.children && setDrillPath((prev) => [...prev, { name: entry.name, level: prev.length }])}>
430 | <Text fontSize={{ base: "xs", sm: "sm" }} fontWeight="medium" noOfLines={1}>
431 | {entry.name}
432 | </Text>
433 | <Text fontSize="xs" color="gray.500" noOfLines={1} mt={{ base: 0.5, sm: 1 }}>
434 | {formatCurrency(entry.value)}
435 | </Text>
436 | </Box>
437 | {isNumber ? (
438 | editable ? (
439 | <NumberInput
440 | size="sm"
441 | w="28"
442 | value={raw as number}
443 | =>
444 | onEdit &&
445 | onEdit(
446 | "set",
447 | [...pathNames, entry.name],
448 | undefined,
449 | Number(v)
450 | )
451 | }
452 | >
453 | <NumberInputField />
454 | <NumberInputStepper>
455 | <NumberIncrementStepper />
456 | <NumberDecrementStepper />
457 | </NumberInputStepper>
458 | </NumberInput>
459 | ) : (
460 | <Text fontSize="sm">{formatCurrency(raw as number)}</Text>
461 | )
462 | ) : (
463 | <IconButton
464 | aria-label="open"
465 | variant="ghost"
466 | => setDrillPath((prev) => [...prev, { name: entry.name, level: prev.length }])}
467 | icon={
468 | <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
469 | <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
470 | </svg>
471 | }
472 | />
473 | )}
474 | {editable && (
475 | <IconButton
476 | aria-label="delete"
477 | size="sm"
478 | ml={2}
479 | => {
480 | setDeleteTarget([...pathNames, entry.name]);
481 | confirmOnOpen();
482 | }}
483 | icon={
484 | <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
485 | <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
486 | </svg>
487 | }
488 | />
489 | )}
490 | </Flex>
491 | </motion.div>
492 | );
493 | })}
494 | {editable && (
495 | <Flex
496 | p={4}
497 | rounded={{ base: "lg", sm: "xl" }}
498 | bg="gray.50"
499 | borderWidth="1px"
500 | borderColor="gray.200"
</content>
<list_code_definition_names># BudgetChart.tsx
34--39 | interface ChartData {
1--564 | "use client";
41--44 | interface DrillPath {
46--88 | const generateColorPalette = (count: number) => {
90--120 | const processDataForChart = (data: Record<string, unknown>): ChartData[] => {
97--118 | .map(([key, value], index) => {
122--134 | const calculateTotal = (obj: Record<string, unknown>): number => {
136--150 | const formatCurrency = (value: number): string => {
152--163 | interface InteractivePieChartProps {
165--562 | const InteractivePieChart: React.FC<InteractivePieChartProps> = ({
182--190 | const currentObject = useMemo(() => {
197--210 | const chartData = useMemo(() => {
213--247 | () => ({
212--249 | const options = useMemo(
222--226 | label: (context: { dataIndex: number }) => {
235--246 | onClick: (_: unknown, elements: Array<{ index: number }>) => {
240--243 | setDrillPath((prev) => [
260--560 | <motion.div
259--561 | return (
265--525 | <Box
275--346 | <Flex justify="space-between" mb={{ base: 6, sm: 8 }}>
276--321 | <Flex align="center" gap={{ base: 3, sm: 4 }} minW={0}>
277--311 | <Flex
288--310 | <svg
296--301 | <path
295--302 | {title === "歳入" ? (
303--308 | <path
302--309 | ) : (
312--320 | <Text
323--344 | <IconButton
322--345 | {drillPath.length > 0 && (
327--334 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="gray">
326--335 | icon={
328--333 | <path
349--377 | <motion.nav
348--378 | {drillPath.length > 0 && (
354--376 | <Breadcrumb
369--375 | {drillPath.map((path, index) => (
370--374 | <BreadcrumbItem key={index}>
380--393 | <Flex
395--524 | <SimpleGrid
401--493 | {currentData.map((entry, index) => {
405--491 | <motion.div
404--492 | return (
411--490 | <Flex
420--428 | <Box
429--436 | <Box flex="1" minW={0} => entry.children && setDrillPath((prev) => [...prev, { name: entry.name, level: prev.length }])}>
438--461 | editable ? (
437--462 | {isNumber ? (
439--458 | <NumberInput
438--459 | editable ? (
443--450 | =>
443--451 | =>
454--457 | <NumberInputStepper>
463--472 | <IconButton
462--473 | ) : (
475--488 | <IconButton
474--489 | {editable && (
479--482 | => {
495--522 | <Flex
494--523 | {editable && (
509--521 | <Button
511--518 | => {
526--559 | <AlertDialog
529--532 | => {
534--558 | <AlertDialogOverlay>
535--557 | <AlertDialogContent>
540--556 | <AlertDialogFooter>
544--555 | <Button
546--552 | => {
</list_code_definition_names>
<notice>Showing only 500 of 565 total lines. Use line_range if you need to read more lines</notice>
</file>
<file><path>front/src/app/page.tsx</path>
<content lines="1-500">
1 | "use client";
2 |
3 | import dynamic from "next/dynamic";
4 | import { useEffect, useState } from "react";
5 | import {
6 | Box,
7 | Button,
8 | Heading,
9 | Text,
10 | Flex,
11 | Textarea,
12 | SimpleGrid,
13 | Stack,
14 | Drawer,
15 | DrawerOverlay,
16 | DrawerContent,
17 | DrawerBody,
18 | IconButton,
19 | FormControl,
20 | FormLabel,
21 | Switch,
22 | Popover,
23 | PopoverTrigger,
24 | PopoverContent,
25 | PopoverArrow,
26 | PopoverBody,
27 | ButtonGroup,
28 | Avatar,
29 | Menu,
30 | MenuButton,
31 | MenuList,
32 | MenuItem,
33 | useDisclosure,
34 | useBreakpointValue,
35 | useToast,
36 | Modal,
37 | ModalOverlay,
38 | ModalContent,
39 | ModalHeader,
40 | ModalBody,
41 | ModalFooter,
42 | ModalCloseButton,
43 | Input,
44 | } from "@chakra-ui/react";
45 | import {
46 | FaGithub,
47 | FaHeart,
48 | FaHandHoldingUsd,
49 | FaStar,
50 | FaSignInAlt,
51 | } from "react-icons/fa";
52 | import { useRouter } from "next/navigation";
53 | import {
54 | collection,
55 | addDoc,
56 | getDocs,
57 | query,
58 | limit,
59 | serverTimestamp,
60 | orderBy,
61 | where,
62 | deleteDoc,
63 | } from "firebase/firestore";
64 | import { db } from "../lib/firebase";
65 | import { useAuth } from "@/lib/auth";
66 | import defaultRevenue from "../data/japan/2025/revenue.json";
67 | import defaultExpenditure from "../data/japan/2025/expenditure.json";
68 | import Footer from "../components/Footer";
69 |
70 | const BudgetChart = dynamic(() => import("../components/BudgetChart"), {
71 | ssr: false,
72 | loading: () => <Box textAlign="center" p={10}>Loading...</Box>,
73 | });
74 |
75 | interface Comment {
76 | username: string;
77 | text: string;
78 | }
79 |
80 | interface Dataset {
81 | id?: string;
82 | name: string;
83 | description?: string;
84 | revenue: Record<string, unknown>;
85 | expenditure: Record<string, unknown>;
86 | shareUrl?: string;
87 | comments?: Comment[];
88 | likedBy?: string[];
89 | likes?: number;
90 | }
91 |
92 | const calculateTotal = (data: Record<string, unknown>): number => {
93 | let total = 0;
94 | for (const value of Object.values(data)) {
95 | if (typeof value === "number") {
96 | total += value;
97 | } else if (typeof value === "object" && value !== null) {
98 | total += calculateTotal(value as Record<string, unknown>);
99 | }
100 | }
101 | return total;
102 | };
103 |
104 | const setAtPath = (
105 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
106 | obj: Record<string, any>,
107 | path: string[],
108 | value: number
109 | ) => {
110 | const cloned = structuredClone(obj);
111 | let cur = cloned;
112 | for (let i = 0; i < path.length - 1; i++) {
113 | const key = path[i];
114 | if (typeof cur[key] !== "object" || cur[key] === null) {
115 | cur[key] = {};
116 | }
117 | cur = cur[key];
118 | }
119 | cur[path[path.length - 1]] = value;
120 | return cloned;
121 | };
122 |
123 | const deleteAtPath = (
124 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
125 | obj: Record<string, any>,
126 | path: string[]
127 | ) => {
128 | const cloned = structuredClone(obj);
129 | let cur = cloned;
130 | for (let i = 0; i < path.length - 1; i++) {
131 | const key = path[i];
132 | if (typeof cur[key] !== "object" || cur[key] === null) return cloned;
133 | cur = cur[key];
134 | }
135 | delete cur[path[path.length - 1]];
136 | return cloned;
137 | };
138 |
139 | const addAtPath = (
140 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
141 | obj: Record<string, any>,
142 | path: string[],
143 | name: string,
144 | value: number
145 | ) => {
146 | const cloned = structuredClone(obj);
147 | let cur = cloned;
148 | for (const key of path) {
149 | if (typeof cur[key] !== "object" || cur[key] === null) {
150 | cur[key] = {};
151 | }
152 | cur = cur[key];
153 | }
154 | cur[name] = value;
155 | return cloned;
156 | };
157 |
158 | export default function Home() {
159 | const { user, logout, updateUsername } = useAuth();
160 | const router = useRouter();
161 | const [datasets, setDatasets] = useState<Dataset[]>([
162 | {
163 | id: undefined,
164 | name: "Japan 2025",
165 | revenue: defaultRevenue,
166 | expenditure: defaultExpenditure,
167 | comments: [],
168 | likedBy: [],
169 | likes: 0,
170 | },
171 | ]);
172 |
173 | useEffect(() => {
174 | const saved = localStorage.getItem("savedDatasets");
175 | if (saved) {
176 | try {
177 | const arr: Dataset[] = JSON.parse(saved).map((d: Dataset) => ({
178 | id: d.id,
179 | comments: [],
180 | likedBy: d.likedBy || [],
181 | likes: d.likedBy ? d.likedBy.length : d.likes || 0,
182 | ...d,
183 | }));
184 | if (arr.length > 0) {
185 | setDatasets((prev) => [...prev, ...arr]);
186 | }
187 | } catch {}
188 | }
189 | const shared = localStorage.getItem('sharedDataset');
190 | if (shared) {
191 | try {
192 | const ds: Dataset = JSON.parse(shared);
193 | ds.comments = ds.comments || [];
194 | ds.likedBy = ds.likedBy || [];
195 | ds.likes = ds.likedBy.length;
196 | if (ds.id && !ds.shareUrl) {
197 | ds.shareUrl = `${window.location.origin}/idea/${ds.id}`;
198 | }
199 | setDatasets((prev) => [ds, ...prev]);
200 | setSelected(0);
201 | } catch {}
202 | localStorage.removeItem('sharedDataset');
203 | }
204 | }, []);
205 |
206 | useEffect(() => {
207 | const fetchCommunity = async () => {
208 | try {
209 | const q = query(
210 | collection(db, 'budgets'),
211 | orderBy('createdAt', 'desc'),
212 | limit(20)
213 | );
214 | const snap = await getDocs(q);
215 | type FirestoreBudget = {
216 | name: string;
217 | description?: string;
218 | revenue: string;
219 | expenditure: string;
220 | };
221 | const arr: Dataset[] = await Promise.all(
222 | snap.docs.map(async (d) => {
223 | const data = d.data() as FirestoreBudget;
224 | const commentsSnap = await getDocs(
225 | query(
226 | collection(db, 'comments'),
227 | where('budgetId', '==', d.id),
228 | orderBy('createdAt', 'asc')
229 | )
230 | );
231 | const likesSnap = await getDocs(
232 | query(collection(db, 'likes'), where('budgetId', '==', d.id))
233 | );
234 | const comments: Comment[] = commentsSnap.docs.map((c) => ({
235 | username: c.data().username as string,
236 | text: c.data().text as string,
237 | }));
238 | const likedBy = likesSnap.docs.map((l) => l.data().userId as string);
239 | return {
240 | id: d.id,
241 | name: data.name,
242 | description: data.description,
243 | revenue: JSON.parse(data.revenue),
244 | expenditure: JSON.parse(data.expenditure),
245 | shareUrl: `${window.location.origin}/idea/${d.id}`,
246 | comments,
247 | likedBy,
248 | likes: likedBy.length,
249 | };
250 | })
251 | );
252 | setCommunity(arr);
253 | } catch {
254 | // ignore
255 | }
256 | };
257 | fetchCommunity();
258 | }, []);
259 | const [selected, setSelected] = useState(0);
260 | const [revenueInput, setRevenueInput] = useState(
261 | JSON.stringify(defaultRevenue, null, 2)
262 | );
263 | const [expenditureInput, setExpenditureInput] = useState(
264 | JSON.stringify(defaultExpenditure, null, 2)
265 | );
266 | const [error, setError] = useState<string>("");
267 | const [editMode, setEditMode] = useState<"view" | "edit">("view");
268 | const [community, setCommunity] = useState<Dataset[]>([]);
269 | const [commentText, setCommentText] = useState("");
270 | const hasShared = datasets[0]?.id !== undefined;
271 |
272 | useEffect(() => {
273 | const ds = datasets[selected];
274 | setRevenueInput(JSON.stringify(ds.revenue, null, 2));
275 | setExpenditureInput(JSON.stringify(ds.expenditure, null, 2));
276 | }, [selected, datasets]);
277 |
278 | useEffect(() => {
279 | const ds = datasets[selected];
280 | if (ds.id) {
281 | router.replace(`/idea/${ds.id}`);
282 | } else {
283 | router.replace('/');
284 | }
285 | }, [selected, datasets, router]);
286 |
287 | useEffect(() => {
288 | setUsername(user?.displayName || '');
289 | }, [user]);
290 |
291 | const updateDataset = () => {
292 | try {
293 | const revenue = JSON.parse(revenueInput);
294 | const expenditure = JSON.parse(expenditureInput);
295 | setDatasets((prev) =>
296 | prev.map((d, i) => (i === selected ? { ...d, revenue, expenditure } : d))
297 | );
298 | setError("");
299 | } catch {
300 | setError("JSON の構文エラーがあります");
301 | }
302 | };
303 |
304 |
305 | const handleRevenueEdit = (
306 | op: "set" | "delete" | "add",
307 | path: string[],
308 | name?: string,
309 | value?: number
310 | ) => {
311 | setDatasets((prev) => {
312 | const updated = [...prev];
313 | const ds = { ...updated[selected] };
314 | if (op === "set") ds.revenue = setAtPath(ds.revenue, path, value || 0);
315 | if (op === "delete") ds.revenue = deleteAtPath(ds.revenue, path);
316 | if (op === "add" && name) ds.revenue = addAtPath(ds.revenue, path, name, value || 0);
317 | updated[selected] = ds;
318 | return updated;
319 | });
320 | };
321 |
322 | const handleExpenditureEdit = (
323 | op: "set" | "delete" | "add",
324 | path: string[],
325 | name?: string,
326 | value?: number
327 | ) => {
328 | setDatasets((prev) => {
329 | const updated = [...prev];
330 | const ds = { ...updated[selected] };
331 | if (op === "set") ds.expenditure = setAtPath(ds.expenditure, path, value || 0);
332 | if (op === "delete") ds.expenditure = deleteAtPath(ds.expenditure, path);
333 | if (op === "add" && name) ds.expenditure = addAtPath(ds.expenditure, path, name, value || 0);
334 | updated[selected] = ds;
335 | return updated;
336 | });
337 | };
338 |
339 | const handleAddComment = async () => {
340 | if (!commentText.trim()) return;
341 | if (!user) {
342 | window.open('/login', '_blank');
343 | return;
344 | }
345 | const comment: Comment = {
346 | username: user.displayName || '名無し',
347 | text: commentText.trim(),
348 | };
349 | setDatasets((prev) => {
350 | const updated = [...prev];
351 | const ds = { ...updated[selected] };
352 | ds.comments = ds.comments ? [...ds.comments, comment] : [comment];
353 | updated[selected] = ds;
354 | return updated;
355 | });
356 | if (datasets[selected].id) {
357 | const id = datasets[selected].id;
358 | try {
359 | await addDoc(collection(db, 'comments'), {
360 | budgetId: id,
361 | userId: user.uid,
362 | username: comment.username,
363 | text: comment.text,
364 | createdAt: serverTimestamp(),
365 | });
366 | } catch {
367 | // ignore
368 | }
369 | }
370 | setCommentText('');
371 | };
372 |
373 | const handleLike = async () => {
374 | if (!user) {
375 | router.push('/login');
376 | return;
377 | }
378 | const uid = user.uid;
379 | const cur = datasets[selected];
380 | const already = cur.likedBy?.includes(uid);
381 | setDatasets((prev) => {
382 | const updated = [...prev];
383 | const ds = { ...updated[selected] };
384 | ds.likedBy = ds.likedBy || [];
385 | ds.likedBy = already
386 | ? ds.likedBy.filter((id) => id !== uid)
387 | : [...ds.likedBy, uid];
388 | ds.likes = ds.likedBy.length;
389 | updated[selected] = ds;
390 | return updated;
391 | });
392 | if (cur.id) {
393 | const id = cur.id;
394 | try {
395 | const likeQuery = query(
396 | collection(db, 'likes'),
397 | where('budgetId', '==', id),
398 | where('userId', '==', uid)
399 | );
400 | const likeSnap = await getDocs(likeQuery);
401 | if (likeSnap.empty) {
402 | await addDoc(collection(db, 'likes'), {
403 | budgetId: id,
404 | userId: uid,
405 | createdAt: serverTimestamp(),
406 | });
407 | } else {
408 | await deleteDoc(likeSnap.docs[0].ref);
409 | }
410 | } catch {
411 | // ignore
412 | }
413 | }
414 | };
415 |
416 | const [saveName, setSaveName] = useState('');
417 | const [saveDesc, setSaveDesc] = useState('');
418 | const [username, setUsername] = useState('');
419 | const toast = useToast();
420 |
421 | const handleSave = async (name: string, description: string) => {
422 | const newDs: Dataset = {
423 | id: current.id,
424 | name,
425 | description,
426 | revenue: current.revenue,
427 | expenditure: current.expenditure,
428 | comments: current.comments || [],
429 | likedBy: current.likedBy || [],
430 | likes: current.likes || 0,
431 | };
432 | if (user) {
433 | try {
434 | const docRef = await addDoc(collection(db, 'budgets'), {
435 | userId: user.uid,
436 | name,
437 | description,
438 | revenue: JSON.stringify(current.revenue),
439 | expenditure: JSON.stringify(current.expenditure),
440 | createdAt: serverTimestamp(),
441 | });
442 | newDs.id = docRef.id;
443 | const url = `${window.location.origin}/idea/${docRef.id}`;
444 | newDs.shareUrl = url;
445 | await navigator.clipboard.writeText(url);
446 | toast({ description: '共有リンクをコピーしました', status: 'success' });
447 | } catch {
448 | toast({ description: '保存に失敗しました', status: 'error' });
449 | return;
450 | }
451 | } else {
452 | const stored = localStorage.getItem('savedDatasets');
453 | const arr = stored ? JSON.parse(stored) : [];
454 | arr.push(newDs);
455 | localStorage.setItem('savedDatasets', JSON.stringify(arr));
456 | }
457 | setDatasets((prev) => {
458 | const updated = [...prev];
459 | updated[selected] = newDs;
460 | return updated;
461 | });
462 | };
463 |
464 | const copyLink = () => {
465 | const ds = datasets[selected];
466 | const url =
467 | ds.shareUrl || (ds.id ? `${window.location.origin}/idea/${ds.id}` : null);
468 | if (url) {
469 | navigator.clipboard.writeText(url);
470 | toast({ description: '共有リンクをコピーしました', status: 'success' });
471 | } else {
472 | toast({ description: 'まず保存してください', status: 'info' });
473 | }
474 | };
475 |
476 | const shareTwitter = () => {
477 | const ds = datasets[selected];
478 | const url =
479 | ds.shareUrl || (ds.id ? `${window.location.origin}/idea/${ds.id}` : null);
480 | if (url) {
481 | const tweet = `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}`;
482 | window.open(tweet, '_blank');
483 | } else {
484 | toast({ description: 'まず保存してください', status: 'info' });
485 | }
486 | };
487 |
488 | const current = datasets[selected];
489 |
490 | const revenueTotal = calculateTotal(current.revenue);
491 | const expenditureTotal = calculateTotal(current.expenditure);
492 |
493 | const {
494 | isOpen: drawerOpen,
495 | onOpen: openDrawer,
496 | onClose: closeDrawer,
497 | } = useDisclosure();
498 | const {
499 | isOpen: saveOpen,
500 | onOpen: openSave,
</content>
<list_code_definition_names># page.tsx
75--78 | interface Comment {
1--909 | "use client";
80--90 | interface Dataset {
92--102 | const calculateTotal = (data: Record<string, unknown>): number => {
104--121 | const setAtPath = (
123--137 | const deleteAtPath = (
139--156 | const addAtPath = (
158--909 | export default function Home() {
173--204 | useEffect(() => {
177--183 | const arr: Dataset[] = JSON.parse(saved).map((d: Dataset) => ({
206--258 | useEffect(() => {
207--256 | const fetchCommunity = async () => {
215--220 | type FirestoreBudget = {
208--253 | try {
222--250 | snap.docs.map(async (d) => {
234--237 | const comments: Comment[] = commentsSnap.docs.map((c) => ({
272--276 | useEffect(() => {
278--285 | useEffect(() => {
291--302 | const updateDataset = () => {
305--320 | const handleRevenueEdit = (
311--319 | setDatasets((prev) => {
322--337 | const handleExpenditureEdit = (
328--336 | setDatasets((prev) => {
339--371 | const handleAddComment = async () => {
349--355 | setDatasets((prev) => {
373--414 | const handleLike = async () => {
381--391 | setDatasets((prev) => {
421--462 | const handleSave = async (name: string, description: string) => {
457--461 | setDatasets((prev) => {
464--474 | const copyLink = () => {
476--486 | const shareTwitter = () => {
511--615 | const SidebarContent = ({ onSelect }: { onSelect?: () => void }) => (
512--614 | <Box
523--552 | <Stack spacing={2}>
526--551 | .map((d, i) => {
529--549 | <Button
528--550 | return (
536--539 | => {
541--548 | <Box>
558--579 | <Stack spacing={2}>
554--580 | <>
559--578 | <Button
565--568 | => {
570--577 | <Box>
587--611 | <Stack spacing={2}>
583--612 | <>
588--610 | {community.map((d, i) => (
589--609 | <Button
595--599 | => {
601--608 | <Box>
618--907 | <Box minH="100vh" display="flex" flexDirection="column">
617--908 | return (
619--832 | <Flex flex="1">
623--630 | <Drawer isOpen={drawerOpen} placement="left"
622--631 | ) : (
625--629 | <DrawerContent maxW="60">
632--831 | <Box flex="1" p={6}>
633--712 | <Flex align="center" mb={4} gap={2} justify="space-between">
635--644 | <IconButton
634--645 | {!isDesktop && (
647--677 | <Popover placement="bottom-end">
648--652 | <PopoverTrigger>
653--676 | <PopoverContent w="auto">
655--675 | <PopoverBody>
656--674 | <ButtonGroup size="sm" isAttached variant="solid" gap={2}>
657--664 | <Button
665--673 | <Button
678--691 | <Button
692--711 | {user ? (
693--699 | <Menu>
692--700 | {user ? (
695--698 | <MenuList>
701--706 | <IconButton
700--707 | ) : isMobile ? (
713--830 | <Stack gap={8}>
714--726 | <Box textAlign="center">
715--722 | <Heading
728--771 | <Flex flexWrap="wrap" align="center" gap={4}>
730--744 | <Button
731--739 | => {
757--770 | <FormControl display="flex" alignItems="center" w="auto">
761--769 | <Switch
773--786 | <Simpl
10000
eGrid columns={{ base: 1, lg: 2 }} gap={6}>
774--779 | <BudgetChart
780--785 | <BudgetChart
788--804 | <Box mt={4}>
790--799 | <Stack spacing={2} maxH="40" overflowY="auto">
791--798 | {current.comments?.map((c, i) => (
792--797 | <Box key={i} p={2} borderWidth="1px" borderRadius="md" bg="white" _dark={{ bg: 'gray.700' }}>
800--803 | <Flex mt={2} gap={2}>
806--829 | <SimpleGrid columns={{ base: 1, lg: 2 }} gap={6}>
807--817 | <Box p={4} borderWidth="1px" borderRadius="xl" bg="gray.50" _dark={{ bg: 'gray.700' }}>
809--813 | <Textarea
818--828 | <Box p={4} borderWidth="1px" borderRadius="xl" bg="gray.50" _dark={{ bg: 'gray.700' }}>
820--824 | <Textarea
834--845 | <Button
846--879 | <Modal isOpen={saveOpen}
848--878 | <ModalContent>
851--863 | <ModalBody>
852--858 | <FormControl mb={4} isRequired>
854--857 | <Input
859--862 | <FormControl>
864--877 | <ModalFooter>
866--876 | <Button
868--872 | => {
880--906 | <Modal isOpen={profileOpen}
882--905 | <ModalContent>
885--890 | <ModalBody>
886--889 | <FormControl>
891--904 | <ModalFooter>
893--903 | <Button
895--899 | => {
</list_code_definition_names>
<notice>Showing only 500 of 910 total lines. Use line_range if you need to read more lines</notice>
</file>
<file><path>front/src/app/idea/[id]/page.tsx</path>
<content lines="1-67">
1 | 'use client'
2 |
3 | import Home from '../../page'
4 | import { useEffect, useState } from 'react'
5 | import {
6 | doc,
7 | getDoc,
8 | collection,
9 | getDocs,
10 | query,
11 | where,
12 | orderBy,
13 | } from 'firebase/firestore'
14 | import { db } from '@/lib/firebase'
15 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
16 | export default function IdeaPage({ params }: any) {
17 | const [ready, setReady] = useState(false)
18 | useEffect(() => {
19 | const load = async () => {
20 | try {
21 | const snap = await getDoc(doc(db, 'budgets', params.id))
22 | if (snap.exists()) {
23 | type FirestoreBudget = {
24 | name: string
25 | description?: string
26 | revenue: string
27 | expenditure: string
28 | }
29 | const d = snap.data() as FirestoreBudget
30 | const commentsSnap = await getDocs(
31 | query(
32 | collection(db, 'comments'),
33 | where('budgetId', '==', params.id),
34 | orderBy('createdAt', 'asc')
35 | )
36 | )
37 | const likesSnap = await getDocs(
38 | query(collection(db, 'likes'), where('budgetId', '==', params.id))
39 | )
40 | const comments = commentsSnap.docs.map((c) => ({
41 | username: c.data().username as string,
42 | text: c.data().text as string,
43 | }))
44 | const likedBy = likesSnap.docs.map((l) => l.data().userId as string)
45 | const dataset = {
46 | id: params.id,
47 | name: d.name,
48 | description: d.description,
49 | revenue: JSON.parse(d.revenue),
50 | expenditure: JSON.parse(d.expenditure),
51 | comments,
52 | likedBy,
53 | likes: likedBy.length,
54 | shareUrl: `${window.location.origin}/idea/${params.id}`,
55 | }
56 | localStorage.setItem('sharedDataset', JSON.stringify(dataset))
57 | }
58 | } catch (e) {
59 | console.error(e)
60 | } finally {
61 | setReady(true)
62 | }
63 | }
64 | load()
65 | }, [params.id])
66 | return ready ? <Home /> : null
67 | }
</content>
</file>
</files>
<environment_details>
# VSCode Visible Files
front/src/app/page.tsx
# VSCode Open Tabs
front/src/data/japan/2025/revenue.json,front/src/data/japan/2025/expenditure.json,front/src/components/BudgetChart.tsx,front/src/app/page.tsx,front/src/app/providers.tsx
# Current Time
7/6/2025, 4:53:58 PM (Asia/Tokyo, UTC+9:00)
# Current Cost
$0.00
# Current Mode
<slug>code</slug>
<name>💻 Code</name>
<model>claude-sonnet-4</model>
</environment_details>
---
**Assistant:**
<read_file>
<args>
<file>
<path>front/src/app/page.tsx</path>
<line_range>500-910</line_range>
</file>
</args>
</read_file>
---
**User:**
[read_file for 'front/src/app/page.tsx'. Reading multiple files at once is more efficient for the LLM. If other files are relevant to your current task, please read them simultaneously.] Result:
<files>
<file><path>front/src/app/page.tsx</path>
<content lines="500-910">
500 | onOpen: openSave,
501 | onClose: closeSave,
502 | } = useDisclosure();
503 | const {
504 | isOpen: profileOpen,
505 | onOpen: openProfile,
506 | onClose: closeProfile,
507 | } = useDisclosure();
508 | const isDesktop = useBreakpointValue({ base: false, lg: true });
509 | const isMobile = useBreakpointValue({ base: true, md: false });
510 |
511 | const SidebarContent = ({ onSelect }: { onSelect?: () => void }) => (
512 | <Box
513 | w={{ base: 'full', lg: 60 }}
514 | p={4}
515 | borderRightWidth='1px'
516 | bg='gray.50'
517 | _dark={{ bg: 'gray.800' }}
518 | minH='100vh'
519 | >
520 | <Heading size='sm' mb={2}>
521 | オリジナル
522 | </Heading>
523 | <Stack spacing={2}>
524 | {datasets
525 | .slice(hasShared ? 1 : 0, hasShared ? 2 : 1)
526 | .map((d, i) => {
527 | const index = i + (hasShared ? 1 : 0);
528 | return (
529 | <Button
530 | key={index}
531 | variant={selected === index ? 'solid' : 'ghost'}
532 | colorScheme='blue'
533 | justifyContent='flex-start'
534 | textAlign='left'
535 | whiteSpace='normal'
536 | => {
537 | setSelected(index);
538 | if (onSelect) onSelect();
539 | }}
540 | >
541 | <Box>
542 | <Text>{d.name}</Text>
543 | {d.description && (
544 | <Text fontSize='xs' color='gray.500'>
545 | {d.description}
546 | </Text>
547 | )}
548 | </Box>
549 | </Button>
550 | );
551 | })}
552 | </Stack>
553 | {hasShared && (
554 | <>
555 | <Heading size='sm' mt={6} mb={2}>
556 | 今表示している予算案
557 | </Heading>
558 | <Stack spacing={2}>
559 | <Button
560 | variant={selected === 0 ? 'solid' : 'ghost'}
561 | colorScheme='blue'
562 | justifyContent='flex-start'
563 | textAlign='left'
564 | whiteSpace='normal'
565 | => {
566 | setSelected(0);
567 | if (onSelect) onSelect();
568 | }}
569 | >
570 | <Box>
571 | <Text>{datasets[0].name}</Text>
572 | {datasets[0].description && (
573 | <Text fontSize='xs' color='gray.500'>
574 | {datasets[0].description}
575 | </Text>
576 | )}
577 | </Box>
578 | </Button>
579 | </Stack>
580 | </>
581 | )}
582 | {community.length > 0 && (
583 | <>
584 | <Heading size='sm' mt={6} mb={2}>
585 | みんなの予算案
586 | </Heading>
587 | <Stack spacing={2}>
588 | {community.map((d, i) => (
589 | <Button
590 | key={`c-${i}`}
591 | variant='ghost'
592 | justifyContent='flex-start'
593 | textAlign='left'
594 | whiteSpace='normal'
595 | => {
596 | setDatasets((prev) => [...prev, d]);
597 | setSelected(datasets.length);
598 | if (onSelect) onSelect();
599 | }}
600 | >
601 | <Box>
602 | <Text>{d.name}</Text>
603 | {d.description && (
604 | <Text fontSize='xs' color='gray.500'>
605 | {d.description}
606 | </Text>
607 | )}
608 | </Box>
609 | </Button>
610 | ))}
611 | </Stack>
612 | </>
613 | )}
614 | </Box>
615 | );
616 |
617 | return (
618 | <Box minH="100vh" display="flex" flexDirection="column">
619 | <Flex flex="1">
620 | {isDesktop ? (
621 | <SidebarContent />
622 | ) : (
623 | <Drawer isOpen={drawerOpen} placement="left"
624 | <DrawerOverlay />
625 | <DrawerContent maxW="60">
626 | <DrawerBody p={0}>
627 | <SidebarContent />
628 | </DrawerBody>
629 | </DrawerContent>
630 | </Drawer>
631 | )}
632 | <Box flex="1" p={6}>
633 | <Flex align="center" mb={4} gap={2} justify="space-between">
634 | {!isDesktop && (
635 | <IconButton
636 | aria-label="メニュー"
637 | icon={
638 | <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
639 | <path d="M2 4h16M2 10h16M2 16h16" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
640 | </svg>
641 | }
642 |
643 | variant="outline"
644 | />
645 | )}
646 | <Box flex="1" />
647 | <Popover placement="bottom-end">
648 | <PopoverTrigger>
649 | <Button leftIcon={<FaHeart />} variant="outline" colorScheme="pink">
650 | 支援する
651 | </Button>
652 | </PopoverTrigger>
653 | <PopoverContent w="auto">
654 | <PopoverArrow />
655 | <PopoverBody>
656 | <ButtonGroup size="sm" isAttached variant="solid" gap={2}>
657 | <Button
658 | as="a"
659 | href="https://paypal.me/taniiicom?country.x=JP&locale.x=ja_JP"
660 | leftIcon={<FaHandHoldingUsd />}
661 | colorScheme="pink"
662 | >
663 | 1回限り
664 | </Button>
665 | <Button
666 | as="a"
667 | href=…
**User:**
<task>
- このプロジェクトにおける，`みんなの予算案` 部分が 1 件も表示されません， firestore からの取得が悪いのか，表示に問題があるのか
- 原因を特定してください
</task>
<environment_details>
# VSCode Visible Files
front/src/lib/firestore.ts
# VSCode Open Tabs
front/src/data/japan/2025/revenue.json,front/src/data/japan/2025/expenditure.json,front/src/components/BudgetChart.tsx,front/src/app/page.tsx,front/src/app/idea/[id]/page.tsx,front/src/lib/firestore.ts,front/src/app/providers.tsx
# Current Time
7/6/2025, 5:14:26 PM (Asia/Tokyo, UTC+9:00)
# Current Cost
$0.00
# Current Mode
<slug>code</slug>
<name>💻 Code</name>
<model>copilot/claude-sonnet-4</model>
# Current Workspace Directory (/Users/taniiicom/projects/budget-simulator) Files
front/
front/.gitignore
front/eslint.config.mjs
front/next.config.ts
front/package-lock.json
front/package.json
front/postcss.config.js
front/README.md
front/tailwind.config.js
front/tsconfig.json
front/public/
front/public/file.svg
front/public/globe.svg
front/public/next.svg
front/public/vercel.svg
front/public/window.svg
front/src/
front/src/app/
front/src/app/globals.css
front/src/app/layout.tsx
front/src/app/page.tsx
front/src/app/providers.tsx
front/src/app/idea/
front/src/app/idea/[id]/
front/src/app/idea/[id]/page.tsx
front/src/app/login/
front/src/app/login/page.tsx
front/src/components/
front/src/components/BudgetChart.tsx
front/src/components/Footer.tsx
front/src/data/
front/src/data/japan/
front/src/data/japan/2025/
front/src/data/japan/2025/expenditure.json
front/src/data/japan/2025/revenue.json
front/src/lib/
front/src/lib/auth.tsx
front/src/lib/firebase.ts
front/src/lib/firestore.ts
research/
research/japan/
research/japan/README.md
research/japan/2025/
research/japan/2025/expenditure/
research/japan/2025/expenditure/expenditure.json
research/japan/2025/expenditure/shift_jis.xml
research/japan/2025/expenditure/utf8.xml
research/japan/2025/expenditure/original/
research/japan/2025/expenditure/original/全画面表示 - 令和7年度 一般会計予算 当初予算.xml
research/japan/2025/revenue/
research/japan/2025/revenue/revenue.json
research/japan/2025/revenue/shift_jis.xml
research/japan/2025/revenue/utf8.xml
research/japan/2025/revenue/original/
research/japan/2025/revenue/original/全画面表示 - 令和7年度 一般会計予算 当初予算_歳入.xml
</environment_details>
---
**Assistant:**
<thinking>
ユーザーは「みんなの予算案」部分が1件も表示されない問題について、Firestoreからの取得が悪いのか、表示に問題があるのかを特定してほしいとのことです。
まず、プロジェクトの構造を理解する必要があります。frontディレクトリにNext.jsアプリケーションがあり、Firestoreを使用していることがファイル構造から分かります。
問題を特定するために：
1. まず、メインページ(page.tsx)でどのように「みんなの予算案」が実装されているかを確認
2. Firestoreの設定と取得ロジックを確認
3. 表示コンポーネントを確認
現在開いているタブから、主要なファイルは：
- front/src/app/page.tsx - メインページ
- front/src/lib/firestore.ts - Firestoreの設定・操作
- front/src/components/BudgetChart.tsx - 予算表示コンポーネント
これらのファイルを順番に読んで、問題を特定していきます。
</thinking>
「みんなの予算案」の表示問題を調査します。まず、関連するファイルを読んで問題を特定しましょう。
<read_file>
<args>
<file>
<path>front/src/app/page.tsx</path>
</file>
<file>
<path>front/src/lib/firestore.ts</path>
</file>
<file>
<path>front/src/components/BudgetChart.tsx</path>
</file>
<file>
<path>front/src/lib/firebase.ts</path>
</file>
<file>
<path>front/src/app/providers.tsx</path>
</file>
</args>
</read_file>
---
**User:**
[read_file for 5 files] Result:
<files>
<file><path>front/src/app/page.tsx</path>
<content lines="1-500">
1 | "use client";
2 |
3 | import dynamic from "next/dynamic";
4 | import { useEffect, useState } from "react";
5 | import {
6 | Box,
7 | Button,
8 | Heading,
9 | Text,
10 | Flex,
11 | Textarea,
12 | SimpleGrid,
13 | Stack,
14 | Drawer,
15 | DrawerOverlay,
16 | DrawerContent,
17 | DrawerBody,
18 | IconButton,
19 | FormControl,
20 | FormLabel,
21 | Switch,
22 | Popover,
23 | PopoverTrigger,
24 | PopoverContent,
25 | PopoverArrow,
26 | PopoverBody,
27 | ButtonGroup,
28 | Avatar,
29 | Menu,
30 | MenuButton,
31 | MenuList,
32 | MenuItem,
33 | useDisclosure,
34 | useBreakpointValue,
35 | useToast,
36 | Modal,
37 | ModalOverlay,
38 | ModalContent,
39 | ModalHeader,
40 | ModalBody,
41 | ModalFooter,
42 | ModalCloseButton,
43 | Input,
44 | } from "@chakra-ui/react";
45 | import {
46 | FaGithub,
47 | FaHeart,
48 | FaHandHoldingUsd,
49 | FaStar,
50 | FaSignInAlt,
51 | } from "react-icons/fa";
52 | import { useRouter } from "next/navigation";
53 | import {
54 | saveBudget,
55 | getCommunityBudgets,
56 | addComment,
57 | toggleLike,
58 | type Dataset,
59 | type Comment,
60 | } from "../lib/firestore";
61 | import { useAuth } from "@/lib/auth";
62 | import defaultRevenue from "../data/japan/2025/revenue.json";
63 | import defaultExpenditure from "../data/japan/2025/expenditure.json";
64 | import Footer from "../components/Footer";
65 |
66 | const BudgetChart = dynamic(() => import("../components/BudgetChart"), {
67 | ssr: false,
68 | loading: () => (
69 | <Box textAlign="center" p={10}>
70 | Loading...
71 | </Box>
72 | ),
73 | });
74 |
75 | const calculateTotal = (data: Record<string, unknown>): number => {
76 | let total = 0;
77 | for (const value of Object.values(data)) {
78 | if (typeof value === "number") {
79 | total += value;
80 | } else if (typeof value === "object" && value !== null) {
81 | total += calculateTotal(value as Record<string, unknown>);
82 | }
83 | }
84 | return total;
85 | };
86 |
87 | const setAtPath = (
88 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
89 | obj: Record<string, any>,
90 | path: string[],
91 | value: number
92 | ) => {
93 | const cloned = structuredClone(obj);
94 | let cur = cloned;
95 | for (let i = 0; i < path.length - 1; i++) {
96 | const key = path[i];
97 | if (typeof cur[key] !== "object" || cur[key] === null) {
98 | cur[key] = {};
99 | }
100 | cur = cur[key];
101 | }
102 | cur[path[path.length - 1]] = value;
103 | return cloned;
104 | };
105 |
106 | const deleteAtPath = (
107 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
108 | obj: Record<string, any>,
109 | path: string[]
110 | ) => {
111 | const cloned = structuredClone(obj);
112 | let cur = cloned;
113 | for (let i = 0; i < path.length - 1; i++) {
114 | const key = path[i];
115 | if (typeof cur[key] !== "object" || cur[key] === null) return cloned;
116 | cur = cur[key];
117 | }
118 | delete cur[path[path.length - 1]];
119 | return cloned;
120 | };
121 |
122 | const addAtPath = (
123 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
124 | obj: Record<string, any>,
125 | path: string[],
126 | name: string,
127 | value: number
128 | ) => {
129 | const cloned = structuredClone(obj);
130 | let cur = cloned;
131 | for (const key of path) {
132 | if (typeof cur[key] !== "object" || cur[key] === null) {
133 | cur[key] = {};
134 | }
135 | cur = cur[key];
136 | }
137 | cur[name] = value;
138 | return cloned;
139 | };
140 |
141 | export default function Home() {
142 | const { user, logout, updateUsername } = useAuth();
143 | const router = useRouter();
144 | const [datasets, setDatasets] = useState<Dataset[]>([
145 | {
146 | id: undefined,
147 | name: "Japan 2025",
148 | revenue: defaultRevenue,
149 | expenditure: defaultExpenditure,
150 | comments: [],
151 | likedBy: [],
152 | likes: 0,
153 | },
154 | ]);
155 |
156 | useEffect(() => {
157 | const saved = localStorage.getItem("savedDatasets");
158 | if (saved) {
159 | try {
160 | const arr: Dataset[] = JSON.parse(saved).map((d: Dataset) => ({
161 | id: d.id,
162 | comments: [],
163 | likedBy: d.likedBy || [],
164 | likes: d.likedBy ? d.likedBy.length : d.likes || 0,
165 | ...d,
166 | }));
167 | if (arr.length > 0) {
168 | setDatasets((prev) => [...prev, ...arr]);
169 | }
170 | } catch {}
171 | }
172 | const shared = localStorage.getItem("sharedDataset");
173 | if (shared) {
174 | try {
175 | const ds: Dataset = JSON.parse(shared);
176 | ds.comments = ds.comments || [];
177 | ds.likedBy = ds.likedBy || [];
178 | ds.likes = ds.likedBy.length;
179 | if (ds.id && !ds.shareUrl) {
180 | ds.shareUrl = `${window.location.origin}/idea/${ds.id}`;
181 | }
182 | setDatasets((prev) => [ds, ...prev]);
183 | setSelected(0);
184 | } catch {}
185 | localStorage.removeItem("sharedDataset");
186 | }
187 | }, []);
188 |
189 | useEffect(() => {
190 | const fetchCommunity = async () => {
191 | try {
192 | const q = query(
193 | collection(db, "budgets"),
194 | orderBy("createdAt", "desc"),
195 | limit(20)
196 | );
197 | const snap = await getDocs(q);
198 | type FirestoreBudget = {
199 | name: string;
200 | description?: string;
201 | revenue: string;
202 | expenditure: string;
203 | };
204 | const arr: Dataset[] = await Promise.all(
205 | snap.docs.map(async (d) => {
206 | const data = d.data() as FirestoreBudget;
207 | const commentsSnap = await getDocs(
208 | query(
209 | collection(db, "comments"),
210 | where("budgetId", "==", d.id),
211 | orderBy("createdAt", "asc")
212 | )
213 | );
214 | const likesSnap = await getDocs(
215 | query(collection(db, "likes"), where("budgetId", "==", d.id))
216 | );
217 | const comments: Comment[] = commentsSnap.docs.map((c) => ({
218 | username: c.data().username as string,
219 | text: c.data().text as string,
220 | }));
221 | const likedBy = likesSnap.docs.map(
222 | (l) => l.data().userId as string
223 | );
224 | return {
225 | id: d.id,
226 | name: data.name,
227 | description: data.description,
228 | revenue: JSON.parse(data.revenue),
229 | expenditure: JSON.parse(data.expenditure),
230 | shareUrl: `${window.location.origin}/idea/${d.id}`,
231 | comments,
232 | likedBy,
233 | likes: likedBy.length,
234 | };
235 | })
236 | );
237 | setCommunity(arr);
238 | } catch {
239 | // ignore
240 | }
241 | };
242 | fetchCommunity();
243 | }, []);
244 | const [selected, setSelected] = useState(0);
245 | const [revenueInput, setRevenueInput] = useState(
246 | JSON.stringify(defaultRevenue, null, 2)
247 | );
248 | const [expenditureInput, setExpenditureInput] = useState(
249 | JSON.stringify(defaultExpenditure, null, 2)
250 | );
251 | const [error, setError] = useState<string>("");
252 | const [editMode, setEditMode] = useState<"view" | "edit">("view");
253 | const [community, setCommunity] = useState<Dataset[]>([]);
254 | const [commentText, setCommentText] = useState("");
255 | const hasShared = datasets[0]?.id !== undefined;
256 |
257 | useEffect(() => {
258 | const ds = datasets[selected];
259 | setRevenueInput(JSON.stringify(ds.revenue, null, 2));
260 | setExpenditureInput(JSON.stringify(ds.expenditure, null, 2));
261 | }, [selected, datasets]);
262 |
263 | useEffect(() => {
264 | const ds = datasets[selected];
265 | if (ds.id) {
266 | router.replace(`/idea/${ds.id}`);
267 | } else {
268 | router.replace("/");
269 | }
270 | }, [selected, datasets, router]);
271 |
272 | useEffect(() => {
273 | setUsername(user?.displayName || "");
274 | }, [user]);
275 |
276 | const updateDataset = () => {
277 | try {
278 | const revenue = JSON.parse(revenueInput);
279 | const expenditure = JSON.parse(expenditureInput);
280 | setDatasets((prev) =>
281 | prev.map((d, i) =>
282 | i === selected ? { ...d, revenue, expenditure } : d
283 | )
284 | );
285 | setError("");
286 | } catch {
287 | setError("JSON の構文エラーがあります");
288 | }
289 | };
290 |
291 | const handleRevenueEdit = (
292 | op: "set" | "delete" | "add",
293 | path: string[],
294 | name?: string,
295 | value?: number
296 | ) => {
297 | setDatasets((prev) => {
298 | const updated = [...prev];
299 | const ds = { ...updated[selected] };
300 | if (op === "set") ds.revenue = setAtPath(ds.revenue, path, value || 0);
301 | if (op === "delete") ds.revenue = deleteAtPath(ds.revenue, path);
302 | if (op === "add" && name)
303 | ds.revenue = addAtPath(ds.revenue, path, name, value || 0);
304 | updated[selected] = ds;
305 | return updated;
306 | });
307 | };
308 |
309 | const handleExpenditureEdit = (
310 | op: "set" | "delete" | "add",
311 | path: string[],
312 | name?: string,
313 | value?: number
314 | ) => {
315 | setDatasets((prev) => {
316 | const updated = [...prev];
317 | const ds = { ...updated[selected] };
318 | if (op === "set")
319 | ds.expenditure = setAtPath(ds.expenditure, path, value || 0);
320 | if (op === "delete") ds.expenditure = deleteAtPath(ds.expenditure, path);
321 | if (op === "add" && name)
322 | ds.expenditure = addAtPath(ds.expenditure, path, name, value || 0);
323 | updated[selected] = ds;
324 | return updated;
325 | });
326 | };
327 |
328 | const handleAddComment = async () => {
329 | console.log("handleAddComment called");
330 | if (!commentText.trim()) {
331 | console.log("Comment text is empty");
332 | return;
333 | }
334 | if (!user) {
335 | console.log("User not logged in");
336 | window.open("/login", "_blank");
337 | return;
338 | }
339 | console.log("User:", user.uid, "Dataset ID:", datasets[selected].id);
340 |
341 | const comment: Comment = {
342 | username: user.displayName || "名無し",
343 | text: commentText.trim(),
344 | };
345 | setDatasets((prev) => {
346 | const updated = [...prev];
347 | const ds = { ...updated[selected] };
348 | ds.comments = ds.comments ? [...ds.comments, comment] : [comment];
349 | updated[selected] = ds;
350 | return updated;
351 | });
352 |
353 | // Save to Firestore if budget has an ID
354 | if (datasets[selected].id) {
355 | const id = datasets[selected].id;
356 | console.log("Attempting to add comment to Firestore for budget:", id);
357 | try {
358 | await addComment(id, user.uid, comment.username, comment.text);
359 | console.log("Comment added successfully to Firestore");
360 | } catch (error) {
361 | console.error("Error adding comment to Firestore:", error);
362 | // Revert local state on error
363 | setDatasets((prev) => {
364 | const updated = [...prev];
365 | const ds = { ...updated[selected] };
366 | ds.comments =
367 | ds.comments?.filter((c, i) => i !== ds.comments!.length - 1) || [];
368 | updated[selected] = ds;
369 | return updated;
370 | });
371 | }
372 | } else {
373 | console.log("No budget ID, skipping Firestore save");
374 | }
375 | setCommentText("");
376 | };
377 |
378 | const handleLike = async () => {
379 | console.log("handleLike called");
380 | if (!user) {
381 | console.log("User not logged in, redirecting to login");
382 | router.push("/login");
383 | return;
384 | }
385 | const uid = user.uid;
386 | const cur = datasets[selected];
387 | const already = cur.likedBy?.includes(uid);
388 | console.log("User:", uid, "Budget ID:", cur.id, "Already liked:", already);
389 |
390 | // Update local state first
391 | const newLikedState = !already;
392 | setDatasets((prev) => {
393 | const updated = [...prev];
394 | const ds = { ...updated[selected] };
395 | ds.likedBy = ds.likedBy || [];
396 | ds.likedBy = already
397 | ? ds.likedBy.filter((id) => id !== uid)
398 | : [...ds.likedBy, uid];
399 | ds.likes = ds.likedBy.length;
400 | updated[selected] = ds;
401 | return updated;
402 | });
403 |
404 | // Save to Firestore if budget has an ID
405 | if (cur.id) {
406 | const id = cur.id;
407 | console.log("Attempting to handle like in Firestore for budget:", id);
408 | try {
409 | const liked = await toggleLike(id, uid);
410 | console.log(
411 | `Like ${liked ? "added" : "removed"} successfully to/from Firestore`
412 | );
413 | } catch (error) {
414 | console.error("Error handling like in Firestore:", error);
415 | // Revert local state on error
416 | setDatasets((prev) => {
417 | const updated = [...prev];
418 | const ds = { ...updated[selected] };
419 | ds.likedBy = ds.likedBy || [];
420 | ds.likedBy = newLikedState
421 | ? ds.likedBy.filter((id) => id !== uid)
422 | : [...ds.likedBy, uid];
423 | ds.likes = ds.likedBy.length;
424 | updated[selected] = ds;
425 | return updated;
426 | });
427 | }
428 | } else {
429 | console.log("No budget ID, skipping Firestore operation");
430 | }
431 | };
432 |
433 | const [saveName, setSaveName] = useState("");
434 | const [saveDesc, setSaveDesc] = useState("");
435 | const [username, setUsername] = useState("");
436 | const toast = useToast();
437 |
438 | const handleSave = async (name: string, description: string) => {
439 | const newDs: Dataset = {
440 | id: current.id,
441 | name,
442 | description,
443 | revenue: current.revenue,
444 | expenditure: current.expenditure,
445 | comments: current.comments || [],
446 | likedBy: current.likedBy || [],
447 | likes: current.likes || 0,
448 | };
449 | if (user) {
450 | try {
451 | const budgetId = await saveBudget(
452 | user.uid,
453 | name,
454 | description,
455 | current.revenue,
456 | current.expenditure
457 | );
458 | newDs.id = budgetId;
459 | const url = `${window.location.origin}/idea/${budgetId}`;
460 | newDs.shareUrl = url;
461 | await navigator.clipboard.writeText(url);
462 | toast({ description: "共有リンクをコピーしました", status: "success" });
463 | } catch (error) {
464 | console.error("Error saving budget:", error);
465 | toast({ description: "保存に失敗しました", status: "error" });
466 | return;
467 | }
468 | } else {
469 | const stored = localStorage.getItem("savedDatasets");
470 | const arr = stored ? JSON.parse(stored) : [];
471 | arr.push(newDs);
472 | localStorage.setItem("savedDatasets", JSON.stringify(arr));
473 | }
474 | setDatasets((prev) => {
475 | const updated = [...prev];
476 | updated[selected] = newDs;
477 | return updated;
478 | });
479 | };
480 |
481 | const copyLink = () => {
482 | const ds = datasets[selected];
483 | const url =
484 | ds.shareUrl || (ds.id ? `${window.location.origin}/idea/${ds.id}` : null);
485 | if (url) {
486 | navigator.clipboard.writeText(url);
487 | toast({ description: "共有リンクをコピーしました", status: "success" });
488 | } else {
489 | toast({ description: "まず保存してください", status: "info" });
490 | }
491 | };
492 |
493 | const shareTwitter = () => {
494 | const ds = datasets[selected];
495 | const url =
496 | ds.shareUrl || (ds.id ? `${window.location.origin}/idea/${ds.id}` : null);
497 | if (url) {
498 | const tweet = `https://twitter.com/intent/tweet?url=${encodeURIComponent(
499 | url
500 | )}`;
</content>
<list_code_definition_names># page.tsx
68--72 | loading: () => (
75--85 | const calculateTotal = (data: Record<string, unknown>): number => {
87--104 | const setAtPath = (
106--120 | const deleteAtPath = (
122--139 | const addAtPath = (
141--993 | export default function Home() {
156--187 | useEffect(() => {
160--166 | const arr: Dataset[] = JSON.parse(saved).map((d: Dataset) => ({
189--243 | useEffect(() => {
190--241 | const fetchCommunity = async () => {
198--203 | type FirestoreBudget = {
191--238 | try {
205--235 | snap.docs.map(async (d) => {
217--220 | const comments: Comment[] = commentsSnap.docs.map((c) => ({
257--261 | useEffect(() => {
263--270 | useEffect(() => {
276--289 | const updateDataset = () => {
280--283 | setDatasets((prev) =>
280--284 | setDatasets((prev) =>
291--307 | const handleRevenueEdit = (
297--306 | setDatasets((prev) => {
309--326 | const handleExpenditureEdit = (
315--325 | setDatasets((prev) => {
328--376 | const handleAddComment = async () => {
345--351 | setDatasets((prev) => {
363--370 | setDatasets((prev) => {
378--431 | const handleLike = async () => {
392--402 | setDatasets((prev) => {
416--426 | setDatasets((prev) => {
438--479 | const handleSave = async (name: string, description: string) => {
474--478 | setDatasets((prev) => {
481--491 | const copyLink = () => {
493--505 | const shareTwitter = () => {
530--632 | const SidebarContent = ({ onSelect }: { onSelect?: () => void }) => (
531--631 | <Box
542--569 | <Stack spacing={2}>
543--568 | {datasets.slice(hasShared ? 1 : 0, hasShared ? 2 : 1).map((d, i) => {
546--566 | <Button
545--567 | return (
553--556 | => {
558--565 | <Box>
575--596 | <Stack spacing={2}>
571--597 | <>
576--595 | <Button
582--585 | => {
587--594 | <Box>
604--628 | <Stack spacing={2}>
600--629 | <>
605--627 | {community.map((d, i) => (
606--626 | <Button
612--616 | => {
618--625 | <Box>
635--991 | <Box minH="100vh" display="flex" flexDirection="column">
634--992 | return (
636--904 | <Flex flex="1">
640--647 | <Drawer isOpen={drawerOpen} placement="left"
639--648 | ) : (
642--646 | <DrawerContent maxW="60">
649--903 | <Box flex="1" p={6}>
650--750 | <Flex align="center" mb={4} gap={2} justify="space-between">
652--671 | <IconButton
651--672 | {!isDesktop && (
655--667 | <svg
654--668 | icon={
661--666 | <path
674--708 | <Popover placement="bottom-end">
675--683 | <PopoverTrigger>
676--682 | <Button
684--707 | <PopoverContent w="auto">
686--706 | <PopoverBody>
687--705 | <ButtonGroup size="sm" isAttached variant="solid" gap={2}>
688--695 | <Button
696--704 | <Button
709--722 | <Button
723--749 | {user ? (
724--734 | <Menu>
723--735 | {user ? (
725--729 | <MenuButton
730--733 | <MenuList>
736--741 | <IconButton
735--742 | ) : isMobile ? (
743--748 | <Button
742--749 | ) : (
751--902 | <Stack gap={8}>
752--764 | <Box textAlign="center">
753--760 | <Heading
766--813 | <Flex flexWrap="wrap" align="center" gap={4}>
768--782 | <Button
769--777 | => {
783--789 | <Button
799--812 | <FormControl display="flex" alignItems="center" w="auto">
803--811 | <Switch
815--828 | <SimpleGrid columns={{ base: 1, lg: 2 }} gap={6}>
816--821 | <BudgetChart
822--827 | <BudgetChart
830--860 | <Box mt={4}>
834--850 | <Stack spacing={2} maxH="40" overflowY="auto">
835--849 | {current.comments?.map((c, i) => (
836--848 | <Box
851--859 | <Flex mt={2} gap={2}>
852--857 | <Input
862--901 | <SimpleGrid columns={{ base: 1, lg: 2 }} gap={6}>
863--881 | <Box
873--877 | <Textarea
882--900 | <Box
892--896 | <Textarea
906--919 | <Button
920--958 | <Modal isOpen={saveOpen}
922--957 | <ModalContent>
925--940 | <ModalBody>
926--932 | <FormControl mb={4} isRequired>
928--931 | <Input
933--939 | <FormControl>
935--938 | <Textarea
941--956 | <ModalFooter>
945--955 | <Button
947--951 | => {
959--990 | <Modal isOpen={profileOpen}
961--989 | <ModalContent>
964--972 | <ModalBody>
965--971 | <FormControl>
967--970 | <Input
973--988 | <ModalFooter>
977--987 | <Button
979--983 | => {
</list_code_definition_names>
<notice>Showing only 500 of 993 total lines. Use line_range if you need to read more lines</notice>
</file>
<file><path>front/src/lib/firestore.ts</path>
<content lines="1-267">
1 | import {
2 | collection,
3 | addDoc,
4 | getDocs,
5 | deleteDoc,
6 | query,
7 | where,
8 | orderBy,
9 | serverTimestamp,
10 | doc,
11 | getDoc,
12 | } from "firebase/firestore";
13 | import { db } from "./firebase";
14 |
15 | export interface Comment {
16 | username: string;
17 | text: string;
18 | }
19 |
20 | export interface Dataset {
21 | id?: string;
22 | name: string;
23 | description?: string;
24 | revenue: Record<string, unknown>;
25 | expenditure: Record<string, unknown>;
26 | shareUrl?: string;
27 | comments?: Comment[];
28 | likedBy?: string[];
29 | likes?: number;
30 | createdAt?: { seconds: number } | number;
31 | }
32 |
33 | export interface FirestoreBudget {
34 | name: string;
35 | description?: string;
36 | revenue: string;
37 | expenditure: string;
38 | userId: string;
39 | createdAt: { seconds: number } | number;
40 | }
41 |
42 | export interface FirestoreComment {
43 | budgetId: string;
44 | userId: string;
45 | username: string;
46 | text: string;
47 | createdAt: { seconds: number } | number;
48 | }
49 |
50 | export interface FirestoreLike {
51 | budgetId: string;
52 | userId: string;
53 | createdAt: { seconds: number } | number;
54 | }
55 |
56 | // Budget operations
57 | export const saveBudget = async (
58 | userId: string,
59 | name: string,
60 | description: string,
61 | revenue: Record<string, unknown>,
62 | expenditure: Record<string, unknown>
63 | ): Promise<string> => {
64 | const docRef = await addDoc(collection(db, "budgets"), {
65 | userId,
66 | name,
67 | description,
68 | revenue: JSON.stringify(revenue),
69 | expenditure: JSON.stringify(expenditure),
70 | createdAt: serverTimestamp(),
71 | });
72 | return docRef.id;
73 | };
74 |
75 | export const getBudget = async (budgetId: string): Promise<Dataset | null> => {
76 | try {
77 | const snap = await getDoc(doc(db, "budgets", budgetId));
78 | if (!snap.exists()) return null;
79 |
80 | const data = snap.data() as FirestoreBudget;
81 | const [comments, likes] = await Promise.all([
82 | getComments(budgetId),
83 | getLikes(budgetId),
84 | ]);
85 |
86 | return {
87 | id: budgetId,
88 | name: data.name,
89 | description: data.description,
90 | revenue: JSON.parse(data.revenue),
91 | expenditure: JSON.parse(data.expenditure),
92 | comments,
93 | likedBy: likes.map((like) => like.userId),
94 | likes: likes.length,
95 | shareUrl: `${window.location.origin}/idea/${budgetId}`,
96 | };
97 | } catch (error) {
98 | console.error("Error getting budget:", error);
99 | return null;
100 | }
101 | };
102 |
103 | export const getCommunityBudgets = async (): Promise<Dataset[]> => {
104 | try {
105 | const snap = await getDocs(collection(db, "budgets"));
106 |
107 | const budgets = await Promise.all(
108 | snap.docs.map(async (doc) => {
109 | const data = doc.data() as FirestoreBudget;
110 | const [comments, likes] = await Promise.all([
111 | getComments(doc.id),
112 | getLikes(doc.id),
113 | ]);
114 |
115 | return {
116 | id: doc.id,
117 | name: data.name,
118 | description: data.description,
119 | revenue: JSON.parse(data.revenue),
120 | expenditure: JSON.parse(data.expenditure),
121 | comments,
122 | likedBy: likes.map((like) => like.userId),
123 | likes: likes.length,
124 | shareUrl: `${window.location.origin}/idea/${doc.id}`,
125 | createdAt: data.createdAt,
126 | };
127 | })
128 | );
129 |
130 | // Sort on client side by createdAt (newest first)
131 | budgets.sort((a, b) => {
132 | if (!a.createdAt || !b.createdAt) return 0;
133 | const aTime =
134 | typeof a.createdAt === "object" && "seconds" in a.createdAt
135 | ? a.createdAt.seconds
136 | : (a.createdAt as number);
137 | const bTime =
138 | typeof b.createdAt === "object" && "seconds" in b.createdAt
139 | ? b.createdAt.seconds
140 | : (b.createdAt as number);
141 | return bTime - aTime; // Descending order (newest first)
142 | });
143 |
144 | return budgets.slice(0, 20); // Limit to 20 results
145 | } catch (error) {
146 | console.error("Error getting community budgets:", error);
147 | return [];
148 | }
149 | };
150 |
151 | // Comment operations
152 | export const addComment = async (
153 | budgetId: string,
154 | userId: string,
155 | username: string,
156 | text: string
157 | ): Promise<void> => {
158 | await addDoc(collection(db, "comments"), {
159 | budgetId,
160 | userId,
161 | username,
162 | text,
163 | createdAt: serverTimestamp(),
164 | });
165 | };
166 |
167 | export const getComments = async (budgetId: string): Promise<Comment[]> => {
168 | try {
169 | const q = query(
170 | collection(db, "comments"),
171 | where("budgetId", "==", budgetId)
172 | );
173 | const snap = await getDocs(q);
174 | const comments = snap.docs.map((doc) => {
175 | const data = doc.data() as FirestoreComment;
176 | return {
177 | username: data.username,
178 | text: data.text,
179 | createdAt: data.createdAt,
180 | };
181 | });
182 | // Sort on client side to avoid index requirement
183 | comments.sort((a, b) => {
184 | if (!a.createdAt || !b.createdAt) return 0;
185 | // Handle both Timestamp and seconds-based objects
186 | const aTime =
187 | typeof a.createdAt === "object" && "seconds" in a.createdAt
188 | ? a.createdAt.seconds
189 | : (a.createdAt as number);
190 | const bTime =
191 | typeof b.createdAt === "object" && "seconds" in b.createdAt
192 | ? b.createdAt.seconds
193 | : (b.createdAt as number);
194 | return aTime - bTime;
195 | });
196 | return comments.map(({ username, text }) => ({ username, text }));
197 | } catch (error) {
198 | console.error("Error getting comments:", error);
199 | return [];
200 | }
201 | };
202 |
203 | // Like operations
204 | export const addLike = async (
205 | budgetId: string,
206 | userId: string
207 | ): Promise<void> => {
208 | await addDoc(collection(db, "likes"), {
209 | budgetId,
210 | userId,
211 | createdAt: serverTimestamp(),
212 | });
213 | };
214 |
215 | export const removeLike = async (
216 | budgetId: string,
217 | userId: string
218 | ): Promise<void> => {
219 | const q = query(
220 | collection(db, "likes"),
221 | where("budgetId", "==", budgetId),
222 | where("userId", "==", userId)
223 | );
224 | const snap = await getDocs(q);
225 |
226 | if (!snap.empty) {
227 | await deleteDoc(snap.docs[0].ref);
228 | }
229 | };
230 |
231 | export const getLikes = async (budgetId: string): Promise<FirestoreLike[]> => {
232 | try {
233 | const q = query(collection(db, "likes"), where("budgetId", "==", budgetId));
234 | const snap = await getDocs(q);
235 | return snap.docs.map((doc) => doc.data() as FirestoreLike);
236 | } catch (error) {
237 | console.error("Error getting likes:", error);
238 | return [];
239 | }
240 | };
241 |
242 | export const toggleLike = async (
243 | budgetId: string,
244 | userId: string
245 | ): Promise<boolean> => {
246 | try {
247 | const q = query(
248 | collection(db, "likes"),
249 | where("budgetId", "==", budgetId),
250 | where("userId", "==", userId)
251 | );
252 | const snap = await getDocs(q);
253 |
254 | if (snap.empty) {
255 | // Add like
256 | await addLike(budgetId, userId);
257 | return true; // liked
258 | } else {
259 | // Remove like
260 | await deleteDoc(snap.docs[0].ref);
261 | return false; // unliked
262 | }
263 | } catch (error) {
264 | console.error("Error toggling like:", error);
265 | throw error;
266 | }
267 | };
</content>
</file>
<file><path>front/src/components/BudgetChart.tsx</path>
<content lines="1-500">
1 | "use client";
2 |
3 | import React, { useState, useCallback, useMemo, useRef } from "react";
4 | import { Doughnut } from "react-chartjs-2";
5 | import { motion } from "framer-motion";
6 | import { Chart as ChartJS, ArcElement, Tooltip, Legend, Title } from "chart.js";
7 | import {
8 | Box,
9 | Flex,
10 | Text,
11 | IconButton,
12 | Breadcrumb,
13 | BreadcrumbItem,
14 | BreadcrumbLink,
15 | SimpleGrid,
16 | Input,
17 | NumberInput,
18 | NumberInputField,
19 | NumberInputStepper,
20 | NumberIncrementStepper,
21 | NumberDecrementStepper,
22 | Button,
23 | AlertDialog,
24 | AlertDialogBody,
25 | AlertDialogFooter,
26 | AlertDialogHeader,
27 | AlertDialogContent,
28 | AlertDialogOverlay,
29 | useDisclosure,
30 | } from "@chakra-ui/react";
31 |
32 | ChartJS.register(ArcElement, Tooltip, Legend, Title);
33 |
34 | interface ChartData {
35 | name: string;
36 | value: number;
37 | children?: Record<string, unknown>;
38 | color: string;
39 | }
40 |
41 | interface DrillPath {
42 | name: string;
43 | level: number;
44 | }
45 |
46 | const generateColorPalette = (count: number) => {
47 | // Beautiful modern color palette
48 | const baseColors = [
49 | "#FF6B6B",
50 | "#4ECDC4",
51 | "#45B7D1",
52 | "#96CEB4",
53 | "#FFEAA7",
54 | "#DDA0DD",
55 | "#98D8C8",
56 | "#F7DC6F",
57 | "#BB8FCE",
58 | "#85C1E9",
59 | "#F8C471",
60 | "#82E0AA",
61 | "#F1948A",
62 | "#AED6F1",
63 | "#A3E4D7",
64 | "#F9E79F",
65 | "#D5A6BD",
66 | "#A9DFBF",
67 | "#F5B7B1",
68 | "#D2B4DE",
69 | "#AED6F1",
70 | "#A3E4D7",
71 | "#F9E79F",
72 | "#A9DFBF",
73 | ];
74 |
75 | if (count <= baseColors.length) {
76 | return baseColors.slice(0, count);
77 | }
78 |
79 | // Generate additional colors if needed
80 | const colors = [...baseColors];
81 | for (let i = baseColors.length; i < count; i++) {
82 | const hue = (360 / count) * i;
83 | const saturation = 60 + (i % 3) * 10; // Vary saturation
84 | const lightness = 60 + (i % 4) * 5; // Vary lightness
85 | colors.push(`hsl(${hue}, ${saturation}%, ${lightness}%)`);
86 | }
87 | return colors;
88 | };
89 |
90 | const processDataForChart = (data: Record<string, unknown>): ChartData[] => {
91 | if (!data) return [];
92 |
93 | const entries = Object.entries(data);
94 | const colors = generateColorPalette(entries.length);
95 |
96 | return entries
97 | .map(([key, value], index) => {
98 | if (typeof value === "number") {
99 | return {
100 | name: key,
101 | value,
102 | color: colors[index],
103 | };
104 | } else if (typeof value === "object" && value !== null) {
105 | const total = calculateTotal(value as Record<string, unknown>);
106 | return {
107 | name: key,
108 | value: total,
109 | children: value as Record<string, unknown>,
110 | color: colors[index],
111 | };
112 | }
113 | return {
114 | name: key,
115 | value: 0,
116 | color: colors[index],
117 | };
118 | })
119 | .filter((item) => item.value > 0);
120 | };
121 |
122 | const calculateTotal = (obj: Record<string, unknown>): number => {
123 | let total = 0;
124 |
125 | for (const value of Object.values
4D32
(obj)) {
126 | if (typeof value === "number") {
127 | total += value;
128 | } else if (typeof value === "object" && value !== null) {
129 | total += calculateTotal(value as Record<string, unknown>);
130 | }
131 | }
132 |
133 | return total;
134 | };
135 |
136 | const formatCurrency = (value: number): string => {
137 | const trillion = Math.floor(value / 1000000000000);
138 | const billion = Math.floor((value % 1000000000000) / 100000000);
139 |
140 | if (trillion > 0) {
141 | return `${trillion.toLocaleString()}兆${
142 | billion > 0 ? `${billion.toLocaleString()}億` : ""
143 | }円`;
144 | } else if (billion > 0) {
145 | return `${billion.toLocaleString()}億円`;
146 | } else {
147 | const million = Math.floor(value / 1000);
148 | return `${million.toLocaleString()}万円`;
149 | }
150 | };
151 |
152 | interface InteractivePieChartProps {
153 | title: string;
154 | data: Record<string, unknown>;
155 | onEdit?: (
156 | op: "set" | "delete" | "add",
157 | path: string[],
158 | name?: string,
159 | value?: number
160 | ) => void;
161 | editable?: boolean;
162 | className?: string;
163 | }
164 |
165 | const InteractivePieChart: React.FC<InteractivePieChartProps> = ({
166 | title,
167 | data,
168 | onEdit,
169 | editable = true,
170 | className,
171 | }) => {
172 | const [drillPath, setDrillPath] = useState<DrillPath[]>([]);
173 | const [newName, setNewName] = useState("");
174 | const [newValue, setNewValue] = useState<number>(0);
175 | const [deleteTarget, setDeleteTarget] = useState<string[] | null>(null);
176 | const {
177 | isOpen: confirmOpen,
178 | onOpen: confirmOnOpen,
179 | onClose: confirmOnClose,
180 | } = useDisclosure();
181 | const cancelRef = useRef<HTMLButtonElement>(null);
182 | const currentObject = useMemo(() => {
183 | let current = data;
184 | for (const p of drillPath) {
185 | if (current[p.name] && typeof current[p.name] === "object") {
186 | current = current[p.name] as Record<string, unknown>;
187 | }
188 | }
189 | return current as Record<string, unknown>;
190 | }, [data, drillPath]);
191 | const pathNames = useMemo(() => drillPath.map((d) => d.name), [drillPath]);
192 |
193 | const currentData = useMemo(() => {
194 | return processDataForChart(currentObject);
195 | }, [currentObject]);
196 |
197 | const chartData = useMemo(() => {
198 | return {
199 | labels: currentData.map((item) => item.name),
200 | datasets: [
201 | {
202 | data: currentData.map((item) => item.value),
203 | backgroundColor: currentData.map((item) => item.color),
204 | borderWidth: 0,
205 | hoverBorderWidth: 0,
206 | hoverOffset: 0,
207 | },
208 | ],
209 | };
210 | }, [currentData]);
211 |
212 | const options = useMemo(
213 | () => ({
214 | responsive: true,
215 | maintainAspectRatio: false,
216 | plugins: {
217 | legend: {
218 | display: false,
219 | },
220 | tooltip: {
221 | callbacks: {
222 | label: (context: { dataIndex: number }) => {
223 | const dataIndex = context.dataIndex;
224 | const item = currentData[dataIndex];
225 | return `${item.name}: ${formatCurrency(item.value)}`;
226 | },
227 | },
228 | },
229 | },
230 | animation: {
231 | animateRotate: true,
232 | animateScale: true,
233 | duration: 800,
234 | },
235 | onClick: (_: unknown, elements: Array<{ index: number }>) => {
236 | if (elements.length > 0) {
237 | const index = elements[0].index;
238 | const item = currentData[index];
239 | if (item?.children) {
240 | setDrillPath((prev) => [
241 | ...prev,
242 | { name: item.name, level: prev.length },
243 | ]);
244 | }
245 | }
246 | },
247 | }),
248 | [currentData]
249 | );
250 |
251 | const handleBreadcrumbClick = useCallback((index: number) => {
252 | setDrillPath((prev) => prev.slice(0, index + 1));
253 | }, []);
254 |
255 | const goBack = useCallback(() => {
256 | setDrillPath((prev) => prev.slice(0, -1));
257 | }, []);
258 |
259 | return (
260 | <motion.div
261 | initial={{ opacity: 0, scale: 0.9 }}
262 | animate={{ opacity: 1, scale: 1 }}
263 | transition={{ duration: 0.5 }}
264 | >
265 | <Box
266 | bg="white"
267 | borderWidth="1px"
268 | borderColor="gray.200"
269 | _dark={{ bg: "gray.800", borderColor: "gray.700" }}
270 | rounded="2xl"
271 | p={6}
272 | shadow="sm"
273 | className={className}
274 | >
275 | <Flex justify="space-between" mb={{ base: 6, sm: 8 }}>
276 | <Flex align="center" gap={{ base: 3, sm: 4 }} minW={0}>
277 | <Flex
278 | w={{ base: 10, sm: 12 }}
279 | h={{ base: 10, sm: 12 }}
280 | align="center"
281 | justify="center"
282 | bgGradient="linear(to-br, blue.500, purple.500)"
283 | color="white"
284 | rounded={{ base: "xl", sm: "2xl" }}
285 | shadow="sm"
286 | flexShrink={0}
287 | >
288 | <svg
289 | width="24"
290 | height="24"
291 | viewBox="0 0 24 24"
292 | fill="none"
293 | stroke="currentColor"
294 | >
295 | {title === "歳入" ? (
296 | <path
297 | strokeLinecap="round"
298 | strokeLinejoin="round"
299 | strokeWidth={2}
300 | d="M12 6v6m0 0v6m0-6h6m-6 0H6"
301 | />
302 | ) : (
303 | <path
304 | strokeLinecap="round"
305 | strokeLinejoin="round"
306 | strokeWidth={2}
307 | d="M20 12H4"
308 | />
309 | )}
310 | </svg>
311 | </Flex>
312 | <Text
313 | fontSize={{ base: "lg", sm: "xl", lg: "2xl", xl: "3xl" }}
314 | fontWeight="bold"
315 | bgGradient="linear(to-r, gray.800, gray.600)"
316 | bgClip="text"
317 | noOfLines={1}
318 | >
319 | {title}
320 | </Text>
321 | </Flex>
322 | {drillPath.length > 0 && (
323 | <IconButton
324 | aria-label="戻る"
325 |
326 | icon={
327 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="gray">
328 | <path
329 | strokeLinecap="round"
330 | strokeLinejoin="round"
331 | strokeWidth={2}
332 | d="M10 19l-7-7m0 0l7-7m-7 7h18"
333 | />
334 | </svg>
335 | }
336 | variant="solid"
337 | colorScheme="purple"
338 | rounded="full"
339 | size="lg"
340 | as={motion.button}
341 | whileHover={{ scale: 1.1 }}
342 | whileTap={{ scale: 0.9 }}
343 | shadow="sm"
344 | />
345 | )}
346 | </Flex>
347 |
348 | {drillPath.length > 0 && (
349 | <motion.nav
350 | initial={{ opacity: 0, height: 0 }}
351 | animate={{ opacity: 1, height: "auto" }}
352 | transition={{ duration: 0.3 }}
353 | >
354 | <Breadcrumb
355 | mb={{ base: 6, sm: 8 }}
356 | px={3}
357 | py={3}
358 | rounded={{ base: "xl", sm: "2xl" }}
359 | fontSize={{ base: "xs", sm: "sm" }}
360 | bg="gray.50"
361 | borderWidth="1px"
362 | borderColor="gray.200"
363 | _dark={{ bg: "gray.700", borderColor: "gray.600" }}
364 | separator={<Text mx={2} color="gray.400">/</Text>}
365 | >
366 | <BreadcrumbItem>
367 | <BreadcrumbLink => setDrillPath([])}>トップ</BreadcrumbLink>
368 | </BreadcrumbItem>
369 | {drillPath.map((path, index) => (
370 | <BreadcrumbItem key={index}>
371 | <BreadcrumbLink => handleBreadcrumbClick(index)} maxW={{ base: 32, sm: 48 }} isTruncated>
372 | {path.name}
373 | </BreadcrumbLink>
374 | </BreadcrumbItem>
375 | ))}
376 | </Breadcrumb>
377 | </motion.nav>
378 | )}
379 |
380 | <Flex
381 | h={{ base: 72, sm: 80, lg: 96, xl: 420 }}
382 | align="center"
383 | justify="center"
384 | bg="gray.50"
385 | borderWidth="1px"
386 | borderColor="gray.200"
387 | _dark={{ bg: "gray.800", borderColor: "gray.700" }}
388 | rounded={{ base: "xl", sm: "2xl" }}
389 | >
390 | <Box w="full" h="full" p={{ base: 3, sm: 4, lg: 6 }}>
391 | <Doughnut data={chartData} options={options} />
392 | </Box>
393 | </Flex>
394 |
395 | <SimpleGrid
396 | mt={8}
397 | columns={{ base: 1, sm: 2, md: 2, lg: 2, xl: 2 }}
398 | gap={{ base: 4, sm: 5 }}
399 | justifyItems="center"
400 | >
401 | {currentData.map((entry, index) => {
402 | const raw = currentObject[entry.name];
403 | const isNumber = typeof raw === "number";
404 | return (
405 | <motion.div
406 | key={index}
407 | whileHover={{ scale: 1.02 }}
408 | whileTap={{ scale: 0.98 }}
409 | style={{ width: "100%" }}
410 | >
411 | <Flex
412 | p={{ base: 4, sm: 5 }}
413 | rounded={{ base: "lg", sm: "xl" }}
414 | bg="gray.100"
415 | borderWidth="1px"
416 | borderColor="gray.200"
417 | _dark={{ bg: "gray.700", borderColor: "gray.600" }}
418 | align="center"
419 | >
420 | <Box
421 | w={{ base: 4, sm: 5 }}
422 | h={{ base: 4, sm: 5 }}
423 | rounded="full"
424 | mr={{ base: 3, sm: 4 }}
425 | flexShrink={0}
426 | shadow="sm"
427 | style={{ backgroundColor: entry.color }}
428 | />
429 | <Box flex="1" minW={0} => entry.children && setDrillPath((prev) => [...prev, { name: entry.name, level: prev.length }])}>
430 | <Text fontSize={{ base: "xs", sm: "sm" }} fontWeight="medium" noOfLines={1}>
431 | {entry.name}
432 | </Text>
433 | <Text fontSize="xs" color="gray.500" noOfLines={1} mt={{ base: 0.5, sm: 1 }}>
434 | {formatCurrency(entry.value)}
435 | </Text>
436 | </Box>
437 | {isNumber ? (
438 | editable ? (
439 | <NumberInput
440 | size="sm"
441 | w="28"
442 | value={raw as number}
443 | =>
444 | onEdit &&
445 | onEdit(
446 | "set",
447 | [...pathNames, entry.name],
448 | undefined,
449 | Number(v)
450 | )
451 | }
452 | >
453 | <NumberInputField />
454 | <NumberInputStepper>
455 | <NumberIncrementStepper />
456 | <NumberDecrementStepper />
457 | </NumberInputStepper>
458 | </NumberInput>
459 | ) : (
460 | <Text fontSize="sm">{formatCurrency(raw as number)}</Text>
461 | )
462 | ) : (
463 | <IconButton
464 | aria-label="open"
465 | variant="ghost"
466 | => setDrillPath((prev) => [...prev, { name: entry.name, level: prev.length }])}
467 | icon={
468 | <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
469 | <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
470 | </svg>
471 | }
472 | />
473 | )}
474 | {editable && (
475 | <IconButton
476 | aria-label="delete"
477 | size="sm"
478 | ml={2}
479 | => {
480 | setDeleteTarget([...pathNames, entry.name]);
481 | confirmOnOpen();
482 | }}
483 | icon={
484 | <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
485 | <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
486 | </svg>
487 | }
488 | />
489 | )}
490 | </Flex>
491 | </motion.div>
492 | );
493 | })}
494 | {editable && (
495 | <Flex
496 | p={4}
497 | rounded={{ base: "lg", sm: "xl" }}
498 | bg="gray.50"
499 | borderWidth="1px"
500 | borderColor="gray.200"
</content>
<list_code_definition_names># BudgetChart.tsx
34--39 | interface ChartData {
1--564 | "use client";
41--44 | interface DrillPath {
46--88 | const generateColorPalette = (count: number) => {
90--120 | const processDataForChart = (data: Record<string, unknown>): ChartData[] => {
97--118 | .map(([key, value], index) => {
122--134 | const calculateTotal = (obj: Record<string, unknown>): number => {
136--150 | const formatCurrency = (value: number): string => {
152--163 | interface InteractivePieChartProps {
165--562 | const InteractivePieChart: React.FC<InteractivePieChartProps> = ({
182--190 | const currentObject = useMemo(() => {
197--210 | const chartData = useMemo(() => {
213--247 | () => ({
212--249 | const options = useMemo(
222--226 | label: (context: { dataIndex: number }) => {
235--246 | onClick: (_: unknown, elements: Array<{ index: number }>) => {
240--243 | setDrillPath((prev) => [
260--560 | <motion.div
259--561 | return (
265--525 | <Box
275--346 | <Flex justify="space-between" mb={{ base: 6, sm: 8 }}>
276--321 | <Flex align="center" gap={{ base: 3, sm: 4 }} minW={0}>
277--311 | <Flex
288--310 | <svg
296--301 | <path
295--302 | {title === "歳入" ? (
303--308 | <path
302--309 | ) : (
312--320 | <Text
323--344 | <IconButton
322--345 | {drillPath.length > 0 && (
327--334 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="gray">
326--335 | icon={
328--333 | <path
349--377 | <motion.nav
348--378 | {drillPath.length > 0 && (
354--376 | <Breadcrumb
369--375 | {drillPath.map((path, index) => (
370--374 | <BreadcrumbItem key={index}>
380--393 | <Flex
395--524 | <SimpleGrid
401--493 | {currentData.map((entry, index) => {
405--491 | <motion.div
404--492 | return (
411--490 | <Flex
420--428 | <Box
429--436 | <Box flex="1" minW={0} => entry.children && setDrillPath((prev) => [...prev, { name: entry.name, level: prev.length }])}>
438--461 | editable ? (
437--462 | {isNumber ? (
439--458 | <NumberInput
438--459 | editable ? (
443--450 | =>
443--451 | =>
454--457 | <NumberInputStepper>
463--472 | <IconButton
462--473 | ) : (
475--488 | <IconButton
474--489 | {editable && (
479--482 | => {
495--522 | <Flex
494--523 | {editable && (
509--521 | <Button
511--518 | => {
526--559 | <AlertDialog
529--532 | => {
534--558 | <AlertDialogOverlay>
535--557 | <AlertDialogContent>
540--556 | <AlertDialogFooter>
544--555 | <Button
546--552 | => {
</list_code_definition_names>
<notice>Showing only 500 of 565 total lines. Use line_range if you need to read more lines</notice>
</file>
<file><path>front/src/lib/firebase.ts</path>
<content lines="1-16">
1 | import { initializeApp } from "firebase/app";
2 | import { getAuth } from "firebase/auth";
3 | import { getFirestore } from "firebase/firestore";
4 |
5 | const firebaseConfig = {
6 | apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
7 | authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
8 | projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
9 | storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
10 | messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
11 | appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
12 | };
13 |
14 | const app = initializeApp(firebaseConfig);
15 | export const auth = getAuth(app);
16 | export const db = getFirestore(app, 'yosanorg');
</co
BE96
ntent>
</file>
<file><path>front/src/app/providers.tsx</path>
<content lines="1-12">
1 | 'use client'
2 |
3 | import { ChakraProvider } from '@chakra-ui/react'
4 | import { AuthProvider } from '@/lib/auth'
5 |
6 | export function Providers({ children }: { children: React.ReactNode }) {
7 | return (
8 | <ChakraProvider>
9 | <AuthProvider>{children}</AuthProvider>
10 | </ChakraProvider>
11 | );
12 | }
</content>
</file>
</files>
<environment_details>
# VSCode Visible Files
front/src/lib/firestore.ts
# VSCode Open Tabs
front/src/data/japan/2025/revenue.json,front/src/data/japan/2025/expenditure.json,front/src/components/BudgetChart.tsx,front/src/app/page.tsx,front/src/app/idea/[id]/page.tsx,front/src/lib/firestore.ts,front/src/app/providers.tsx
# Current Time
7/6/2025, 5:14:39 PM (Asia/Tokyo, UTC+9:00)
# Current Cost
$0.00
# Current Mode
<slug>code</slug>
<name>💻 Code</name>
<model>claude-sonnet-4</model>
</environment_details>
---
**Assistant:**
問題を特定するために、追加でいくつかの重要な部分を確認しましょう。
<read_file>
<args>
<file>
<path>front/src/app/page.tsx</path>
<line_range>189-243</line_range>
</file>
</args>
</read_file>
[Response interrupted by a tool use result. Only one tool may be used at a time and should be placed at the end of the message.]
---
**User:**
[read_file for 'front/src/app/page.tsx'. Reading multiple files at once is more efficient for the LLM. If other files are relevant to your current task, please read them simultaneously.] Result:
<files>
<file><path>front/src/app/page.tsx</path>
<content lines="189-243">
189 | useEffect(() => {
190 | const fetchCommunity = async () => {
191 | try {
192 | const q = query(
193 | collection(db, "budgets"),
194 | orderBy("createdAt", "desc"),
195 | limit(20)
196 | );
197 | const snap = await getDocs(q);
198 | type FirestoreBudget = {
199 | name: string;
200 | description?: string;
201 | revenue: string;
202 | expenditure: string;
203 | };
204 | const arr: Dataset[] = await Promise.all(
205 | snap.docs.map(async (d) => {
206 | const data = d.data() as FirestoreBudget;
207 | const commentsSnap = await getDocs(
208 | query(
209 | collection(db, "comments"),
210 | where("budgetId", "==", d.id),
211 | orderBy("createdAt", "asc")
212 | )
213 | );
214 | const likesSnap = await getDocs(
215 | query(collection(db, "likes"), where("budgetId", "==", d.id))
216 | );
217 | const comments: Comment[] = commentsSnap.docs.map((c) => ({
218 | username: c.data().username as string,
219 | text: c.data().text as string,
220 | }));
221 | const likedBy = likesSnap.docs.map(
222 | (l) => l.data().userId as string
223 | );
224 | return {
225 | id: d.id,
226 | name: data.name,
227 | description: data.description,
228 | revenue: JSON.parse(data.revenue),
229 | expenditure: JSON.parse(data.expenditure),
230 | shareUrl: `${window.location.origin}/idea/${d.id}`,
231 | comments,
232 | likedBy,
233 | likes: likedBy.length,
234 | };
235 | })
236 | );
237 | setCommunity(arr);
238 | } catch {
239 | // ignore
240 | }
241 | };
242 | fetchCommunity();
243 | }, []);
</content>
</file>
</files>
<environment_details>
# VSCode Visible Files
front/src/lib/firestore.ts
# VSCode Open Tabs
front/src/data/japan/2025/revenue.json,front/src/data/japan/2025/expenditure.json,front/src/components/BudgetChart.tsx,front/src/app/page.tsx,front/src/app/idea/[id]/page.tsx,front/src/lib/firestore.ts,front/src/app/providers.tsx
# Current Time
7/6/2025, 5:14:45 PM (Asia/Tokyo, UTC+9:00)
# Current Cost
$0.00
# Current Mode
<slug>code</slug>
<name>💻 Code</name>
<model>claude-sonnet-4</model>
</environment_details>
---
**Assistant:**
問題を特定しました！`page.tsx`の189-243行目のコードを分析すると、以下の問題があります：
1. **Firestoreのimportが不足**: [`page.tsx`](front/src/app/page.tsx:192)でFirestoreの`query`、`collection`、`getDocs`、`orderBy`、`limit`、`where`などの関数を使用していますが、これらがimportされていません。
2. **dbのimportが不足**: [`page.tsx`](front/src/app/page.tsx:193)で`db`を使用していますが、importされていません。
まず現在のimport文を確認してから修正しましょう。
<read_file>
<args>
<file>
<path>front/src/app/page.tsx</path>
<line_range>1-65</line_range>
</file>
</args>
</read_file>
---
**User:**
[read_file for 'front/src/app/page.tsx'. Reading multiple files at once is more efficient for the LLM. If other files are relevant to your current task, please read them simultaneously.] Result:
<files>
<file><path>front/src/app/page.tsx</path>
<content lines="1-65">
1 | "use client";
2 |
3 | import dynamic from "next/dynamic";
4 | import { useEffect, useState } from "react";
5 | import {
6 | Box,
7 | Button,
8 | Heading,
9 | Text,
10 | Flex,
11 | Textarea,
12 | SimpleGrid,
13 | Stack,
14 | Drawer,
15 | DrawerOverlay,
16 | DrawerContent,
17 | DrawerBody,
18 | IconButton,
19 | FormControl,
20 | FormLabel,
21 | Switch,
22 | Popover,
23 | PopoverTrigger,
24 | PopoverContent,
25 | PopoverArrow,
26 | PopoverBody,
27 | ButtonGroup,
28 | Avatar,
29 | Menu,
30 | MenuButton,
31 | MenuList,
32 | MenuItem,
33 | useDisclosure,
34 | useBreakpointValue,
35 | useToast,
36 | Modal,
37 | ModalOverlay,
38 | ModalContent,
39 | ModalHeader,
40 | ModalBody,
41 | ModalFooter,
42 | ModalCloseButton,
43 | Input,
44 | } from "@chakra-ui/react";
45 | import {
46 | FaGithub,
47 | FaHeart,
48 | FaHandHoldingUsd,
49 | FaStar,
50 | FaSignInAlt,
51 | } from "react-icons/fa";
52 | import { useRouter } from "next/navigation";
53 | import {
54 | saveBudget,
55 | getCommunityBudgets,
56 | addComment,
57 | toggleLike,
58 | type Dataset,
59 | type Comment,
60 | } from "../lib/firestore";
61 | import { useAuth } from "@/lib/auth";
62 | import defaultRevenue from "../data/japan/2025/revenue.json";
63 | import defaultExpenditure from "../data/japan/2025/expenditure.json";
64 | import Footer from "../components/Footer";
65 |
</content>
</file>
</files>
<environment_details>
# VSCode Visible Files
front/src/lib/firestore.ts
# VSCode Open Tabs
front/src/data/japan/2025/revenue.json,front/src/data/japan/2025/expenditure.json,front/src/components/BudgetChart.tsx,front/src/app/page.tsx,front/src/app/idea/[id]/page.tsx,front/src/lib/firestore.ts,front/src/app/providers.tsx
# Current Time
7/6/2025, 5:14:53 PM (Asia/Tokyo, UTC+9:00)
# Current Cost
$0.00
# Current Mode
<slug>code</slug>
<name>💻 Code</name>
<model>claude-sonnet-4</model>
</environment_details>
---
**Assistant:**
問題を特定しました！**複数の問題**があります：
## 問題1: Firestoreのimportが不足
[`page.tsx`](front/src/app/page.tsx:192-196)で直接Firestoreの関数を使用していますが、これらがimportされていません。
## 問題2: コードの重複
[`page.tsx`](front/src/app/page.tsx:189-243)で独自にコミュニティ予算を取得する実装がありますが、[`firestore.ts`](front/src/lib/firestore.ts:103-149)に既に`getCommunityBudgets`関数が存在し、55行目でimportもされています。しかし実際には使用されていません。
## 問題3: db…
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Testing
npm run lintnpm run buildhttps://chatgpt.com/codex/tasks/task_e_68693b411fb4832997a6ed47c2706bb8
Copy
Summary
Updated the sidebar component so it always occupies the full viewport height by changing its height setting to minH="100vh"
Testing
✅ npm run lint
✅ npm run build
File (1)
みんなの予算案エリアを作って，ランダムで誰かが作った予算案を表示してくださいCopy
Summary
Added Firebase authentication context to manage Google and Twitter login methods
Created a login page so users can sign in using either Google or Twitter
Updated the header to show a login button when logged out and an avatar menu with logout option when logged in
Implemented saving datasets to Firestore and copying a shareable link to the clipboard
Documented required Firebase environment variables in a sample file
Testing
✅ npm run lint
✅ NEXT_PUBLIC_FIREBASE_API_KEY=test NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=test NEXT_PUBLIC_FIREBASE_PROJECT_ID=test NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=test NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=test NEXT_PUBLIC_FIREBASE_APP_ID=test npm run build
Files (9)
Copy
Summary
Documented the steps for enabling Firestore, including example rules and how to copy .env.example to .env with Firebase keys
Testing
✅ npm run lint
✅ NEXT_PUBLIC_FIREBASE_API_KEY=test NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=test NEXT_PUBLIC_FIREBASE_PROJECT_ID=test NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=test NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=test NEXT_PUBLIC_FIREBASE_APP_ID=test npm run build
Files (10)
Copy
Summary
Documented how to copy .env.example and obtain Firebase config keys from the Firebase console, noting that the API keys can be exposed if Firestore rules restrict access
Example Firebase environment variable placeholders are provided in the repository
The login page allows Google or Twitter authentication via Firebase
Firebase is initialized using environment variables for Auth and Firestore
Testing
✅ npm run lint
✅ NEXT_PUBLIC_FIREBASE_API_KEY=test NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=test NEXT_PUBLIC_FIREBASE_PROJECT_ID=test NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=test NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=test NEXT_PUBLIC_FIREBASE_APP_ID=test npm run build
Files (10)
最初のドキュメントの構造体についても書いてくださいCopy
Summary
Added instructions in the README describing how to create the first Firestore document, including each field and data type
Testing
✅ npm run lint
✅ NEXT_PUBLIC_FIREBASE_API_KEY=test NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=test NEXT_PUBLIC_FIREBASE_PROJECT_ID=test NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=test NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=test NEXT_PUBLIC_FIREBASE_APP_ID=test npm run build
Network access
Some requests were blocked due to network access restrictions. Consider granting access in environment settings.
registry.npmjs.org
Files (10)
yosanorgですCopy
Summary
The Firestore client now targets the yosanorg database when initializing, ensuring data is saved in the correct database
Setup documentation clarifies that Firestore should be enabled with database ID yosanorg when creating the budgets collection
Testing
✅ npm run lint
✅ NEXT_PUBLIC_FIREBASE_API_KEY=test NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=test NEXT_PUBLIC_FIREBASE_PROJECT_ID=test NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=test NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=test NEXT_PUBLIC_FIREBASE_APP_ID=test npm run build
Network access
Some requests were blocked due to network access restrictions. Consider granting access in environment settings.
registry.npmjs.org
Files (10)
Twitter でログインボタンの色が，背景色と同化してしまって見えませんGoogle でログインTwitter でログインともに，それぞれのブランドカラーの赤と青を基調とするスタイルにしてくださいCopy
Summary
The login page now uses Google red and Twitter blue background colors on the respective buttons, improving visibility
Testing
✅ npm run lint
✅ NEXT_PUBLIC_FIREBASE_API_KEY=test NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=test NEXT_PUBLIC_FIREBASE_PROJECT_ID=test NEXT_PUBLIC_FIREBASE 8000 _STORAGE_BUCKET=test NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=test NEXT_PUBLIC_FIREBASE_APP_ID=test npm run build
Network access
Some requests were blocked due to network access restrictions. Consider granting access in environment settings.
registry.npmjs.org
Files (10)
このスタックトレースの核心は次の例外です.
FirebaseError: Firebase: Error (auth/account-exists-with-different-credential).
エラーの意味
同じメールアドレスのアカウントが, すでに別の認証方法で作成されている
例: そのメールでパスワード認証済みのユーザーが, Google で初回ログインしようとした場合など
Firebase は, 別プロバイダでアカウントを自動的に統合すると乗っ取りリスクがあるため, 例外を投げて処理を止めます.
solution
以下の流れで「メールアドレスが同じなら同一アカウント」に統合できます .
基本方針
既存プロバイダでまずサインインし, その後で新しいプロバイダを link する,
auth/account-exists-with-different-credential を捕捉して動的に分岐する,
ユーザーには「既に登録済みなので, 〇〇でログインして続行してください」というガイダンスを出す,
典型的な実装手順
エラー捕捉
js
Copy
Edit
try {
await signInWithPopup(auth, googleProvider);
} catch (e) {
if (e.code === 'auth/account-exists-with-different-credential') {
handleMerge(e); // ↓で定義
}
}
既存プロバイダを確認 → ログインさせる
js
Copy
Edit
async function handleMerge(error) {
const pendingCred = GoogleAuthProvider.credentialFromError(error); // 未リンクの資格情報
const email = error.customData.email;
const methods = await fetchSignInMethodsForEmail(auth, email);
// 例: password ログインが既にある場合
if (methods.includes('password')) {
showPasswordLoginUI(email, async (password) => {
const user = await signInWithEmailAndPassword(auth, email, password);
await linkWithCredential(user, pendingCred); // ここで統合
});
}
// 例: 'facebook.com' など別の SNS の場合
else if (methods[0] === 'facebook.com') {
const fbProvider = new FacebookAuthProvider();
const user = await signInWithPopup(auth, fbProvider); // 既存プロバイダで入る
await linkWithCredential(user, pendingCred); // 統合
}
}
Copy
Summary
Updated the auth context to catch auth/account-exists-with-different-credential and merge accounts by signing in with the existing provider before linking the new credential
Testing
✅ npm run lint
✅ NEXT_PUBLIC_FIREBASE_API_KEY=test NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=test NEXT_PUBLIC_FIREBASE_PROJECT_ID=test NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=test NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=test NEXT_PUBLIC_FIREBASE_APP_ID=test npm run build
Files (10)
保存するときの，予算データの名前や description を指定するフローについて，ブラウザのポップアップではなく，ちゃんとアプリ内に実装してくださいリンクも作ったときに一回限りで取得できるわけではなく，その予算データのページが表示されている間，保存ボタンの右横に，
リンク取得ボタンを置いてください共有されたリンクにアクセスすると，共有専用のページを表示するのではなく，トップページで，サイドパネルの
データベースの一番上に，共有された予算データを表示して，それが選択された状態で，そのデータに基づいたグラフを表示するようにしてください任意のユーザが，サイトにアクセスすると，サイドパネルに
みんなの予算案エリアを作って，ランダムで誰かが作った予算案を表示してくださいCopy
Summary
Added modal-based saving with dataset name and description fields, so users can save without browser pop‑ups
Stored shared datasets in localStorage and loaded them automatically on the top page when accessed via a share link
Included a “リンク取得” button next to “保存” for copying the dataset’s share URL whenever needed
Ensured community budget entries include their descriptions and share links
Testing
✅ NEXT_PUBLIC_FIREBASE_API_KEY=test NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=test NEXT_PUBLIC_FIREBASE_PROJECT_ID=test NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=test NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=test NEXT_PUBLIC_FIREBASE_APP_ID=test npm run lint
✅ NEXT_PUBLIC_FIREBASE_API_KEY=test NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=test NEXT_PUBLIC_FIREBASE_PROJECT_ID=test NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=test NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=test NEXT_PUBLIC_FIREBASE_APP_ID=test npm run build
Files (10)
Updated the auth context to catch auth/account-exists-with-different-credential and merge accounts by signing in with the existing provider before linking the new credential-ポップアップはブラウザのものを使わずに，アプリ内で UI として表示してください
Copy
Summary
AuthProvider now opens a modal when a user attempts to sign in with a different provider, guiding them to log in using the existing provider before linking credentials
Dataset save and link copy operations use Chakra toasts instead of browser alerts for a smoother UI
Testing
✅ npm --prefix front run lint
✅ NEXT_PUBLIC_FIREBASE_API_KEY=test NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=test NEXT_PUBLIC_FIREBASE_PROJECT_ID=test NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=test NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=test NEXT_PUBLIC_FIREBASE_APP_ID=test npm --prefix front run build
Files (10)
サイドパネルに，各予算データの description も表示するようにしてください
リンク取得ボタンの代わりに，Twitter にシェア(青色)，リンク共有(灰色) のボタンを新たに作ってくださいリンクについては，予算データごとに一意にしてください
サイドパネルで選択されて今表示されている予算データに基づいて，[url]/idea/[ドキュメントid] のリンクにしてください (ブラウザ上の表示も，
リンク共有ボタンも)サイドパネルを，以下の 3 つの区分に分けてください
1 : オリジナル
avenue.json や expenditure.json であらかじめ用意している，正しいオリジナルの予算データ
2 : 今表示している予算案 (今いるリンクが [url]/idea/[ドキュメントid] の場合のみこのエリアを表示
3 :
みんなの予算案ログインしていなくても，budgets データからランダムに 10 件取得し表示
Copy
Summary
Community datasets now generate share URLs under /idea/[id] for consistent linking
When saving data, the generated share URL uses /idea and is automatically copied to the clipboard
New helper functions allow copying the share link or posting it on Twitter
Sidebar entries show both name and description, organized into “オリジナル,” “今表示している予算案,” and “みんなの予算案” sections
Visiting /idea/[id] loads the dataset before rendering the main page so shared links display correctly
Testing
✅ npm --prefix front run lint
✅ NEXT_PUBLIC_FIREBASE_API_KEY=test NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=test NEXT_PUBLIC_FIREBASE_PROJECT_ID=test NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=test NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=test NEXT_PUBLIC_FIREBASE_APP_ID=test npm --prefix front run build
Files (10)
Copy
Summary
Added a isMobile flag to control responsive behavior on the top page
Display an icon-only login button on mobile screens while showing the full button on larger displays
Testing
✅ npm --prefix front run lint
✅ NEXT_PUBLIC_FIREBASE_API_KEY=test NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=test NEXT_PUBLIC_FIREBASE_PROJECT_ID=test NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=test NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=test NEXT_PUBLIC_FIREBASE_APP_ID=test npm --prefix front run build
Files (10)
みんなの予算案エリアについて，firestore のデータベース名 yosanorg ，コレクション名 budgets の全ユーザの投稿の中から最新 20 件を取得して表示するようにしてくださいCopy
Summary
Community budgets are now fetched using orderBy('createdAt', 'desc') and limit(20), ensuring the “みんなの予算案” area displays the latest entries from Firestore
Testing
✅ npm --prefix front run lint
✅ NEXT_PUBLIC_FIREBASE_API_KEY=test NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=test NEXT_PUBLIC_FIREBASE_PROJECT_ID=test NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=test NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=test NEXT_PUBLIC_FIREBASE_APP_ID=test npm --prefix front run build
Files (10)
保存ボタンについて，未ログイン時には，新しいウィンドウでログインページを開くようにしてください保存時の，名前と description はともに，初期値空欄として，ユーザの入力を促すようにしてください．名前のみ必須項目とします．Copy
Summary
Save now prompts login in a new tab when the user is logged out, otherwise it opens a blank form for dataset details
The save dialog requires a name before allowing submission to Firestore
The login page includes guidance for users who previously logged in with Google
Testing
✅ npm --prefix front run lint
✅ NEXT_PUBLIC_FIREBASE_API_KEY=test NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=test NEXT_PUBLIC_FIREBASE_PROJECT_ID=test NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=test NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=test NEXT_PUBLIC_FIREBASE_APP_ID=test npm --prefix front run build
Files (10)
Copy
Summary
Datasets now track comments and likes, enabling user interaction via a comment box and floating Like button
The login button shows a door icon and opens the login page in a new tab when clicked on mobile
A badge above the Like button displays the current like count for the selected dataset
Testing
✅ npm --prefix front ci
✅ npm --prefix front run lint
✅ NEXT_PUBLIC_FIREBASE_API_KEY=test NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=test NEXT_PUBLIC_FIREBASE_PROJECT_ID=test NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=test NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=test NEXT_PUBLIC_FIREBASE_APP_ID=test npm --prefix front run build
Files (10)
ログインボタンのアイコンについて，login アイコンにしてくださいログアウトの他に，プロフィール設定ボタンを作って，username (表示名) を変更できるようにしてくださいCopy
Summary
The login button now uses the login icon and opens the profile settings or logout menu depending on authentication state
Comments include usernames and persist to Firestore, and likes are stored with increment when clicked
Shared dataset pages load comments and likes from Firestore so they appear in the main interface
Users can update their display name through a new “プロフィール設定” modal linked from the avatar menu
Testing
✅ npm --prefix front ci
✅ npm --prefix front run lint
✅ NEXT_PUBLIC_FIREBASE_API_KEY=test NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=test NEXT_PUBLIC_FIREBASE_PROJECT_ID=test NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=test NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=test NEXT_PUBLIC_FIREBASE_APP_ID=test npm --prefix front run build
Files (10)
Copy
Summary
Documented how to allow authenticated users to update the comments and likes fields on Firestore documents so anyone can interact with shared datasets
Testing
✅ npm --prefix front ci
✅ npm --prefix front run lint
✅ NEXT_PUBLIC_FIREBASE_API_KEY=test NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=test NEXT_PUBLIC_FIREBASE_PROJECT_ID=test NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=test NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=test NEXT_PUBLIC_FIREBASE_APP_ID=test npm --prefix front run build
Files (10)
Copy
Summary
Added a likedBy array to datasets so the app can track which users liked each budget proposal
Implemented login-gated like toggling that updates Firestore with arrayUnion or arrayRemove depending on the current state
Replaced the separate like counter and icon button with a single floating button showing the like count and using a filled style when already liked
Shared budget pages now include the likedBy data so likes are correctly restored when visiting /idea/[id] links
Testing
✅ npm --prefix front ci
✅ npm --prefix front run lint
✅ NEXT_PUBLIC_FIREBASE_API_KEY=test NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=test NEXT_PUBLIC_FIREBASE_PROJECT_ID=test NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=test NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=test NEXT_PUBLIC_FIREBASE_APP_ID=test npm --prefix front run build
Files (10)
Copy
Summary
Firestore rules now protect independent budgets, comments, and likes collections so each document can only be edited by its owner
Example documents describe how to structure the three collections when creating the first entries
Comments are saved into the comments collection with user details and a timestamp
Likes create or remove documents from the likes collection, keeping counts updated
Shared budget pages fetch related comments and likes alongside the budget data
Testing
✅ npm --prefix front ci
✅ npm --prefix front run lint
✅ NEXT_PUBLIC_FIREBASE_API_KEY=test NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=test NEXT_PUBLIC_FIREBASE_PROJECT_ID=test NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=test NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=test NEXT_PUBLIC_FIREBASE_APP_ID=test npm --prefix front run build
Files (10)
Copy
Summary
The shared budget page now catches Firestore errors when loading likes and comments, ensuring the main app renders even if there are no documents yet
Testing
✅ npm --prefix front run lint
✅ NEXT_PUBLIC_FIREBASE_API_KEY=test NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=test NEXT_PUBLIC_FIREBASE_PROJECT_ID=test NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=test NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=test NEXT_PUBLIC_FIREBASE_APP_ID=test npm --prefix front run build
Files (10)
Copy
Summary
Updated the like handler so each new like document includes a createdAt timestamp, ensuring every like action is saved in Firestore with the proper structure
Testing
✅ npm --prefix front run lint
✅ NEXT_PUBLIC_FIREBASE_API_KEY=test NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=test NEXT_PUBLIC_FIREBASE_PROJECT_ID=test NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=test NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=test NEXT_PUBLIC_FIREBASE_APP_ID=test npm --prefix front run build
Files (10)
Copy
Summary
Added a new id field to datasets so Firestore document IDs are retained and used when adding comments and likes
Comments are now saved using this id rather than parsing the URL, ensuring the network request is sent correctly
Likewise, likes use the stored id to read or write the associated document in Firestore
When opening a shared link, the dataset now includes its Firestore ID for subsequent interactions
Testing
✅ npm --prefix front run lint
✅ NEXT_PUBLIC_FIREBASE_API_KEY=test NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=test NEXT_PUBLIC_FIREBASE_PROJECT_ID=test NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=test NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=test NEXT_PUBLIC_FIREBASE_APP_ID=test npm --prefix front run build
Files (10)
.env.example
New
front/README.md
+66
-0
front/package-lock.json
+985
-7
front/package.json
+1
-0
front/src/app/idea/[id]/page.tsx
New
front/src/app/login/page.tsx
New
front/src/app/page.tsx
+541
-54
front/src/app/providers.tsx
+6
-1
front/src/lib/auth.tsx
New
front/src/lib/firebase.ts
New