コード
app/AdminInfo.tsx
"use client";
import React, { useEffect, useState } from "react";
import { db } from "@/lib/firebase";
import { collection, getDocs } from "firebase/firestore";
import { productConverter } from "@/lib/productConverter";
import { ProductData } from "@/types/product";
export default function AdminInfo() {
const [products, setProducts] = useState<ProductData[]>([]);
//useEffectでFirestore"products"コレクションからデータを取得
useEffect(() => {
const fetchProducts = async () => {
const ref = collection(db, "products").withConverter(productConverter);
const snapshot = await getDocs(ref);
const data = snapshot.docs.map((doc) => doc.data());
setProducts(data);
};
fetchProducts();
}, []);
return (
<table className="w-full border-collapse text-left text-sm">
<thead className="bg-gray-100 text-gray-700">
<tr>
<th className="p-2 border">登録日</th>
<th className="p-2 border">最終更新日</th>
<th className="p-2 border">登録者</th>
<th className="p-2 border">管理部門</th>
<th className="p-2 border">ステータス</th>
<th className="p-2 border">非表示理由</th>
</tr>
</thead>
<tbody>
{products.map((item, index) => (
<tr key={index}>
<td className="p-2 border">{item.createdBy}</td>
<td className="p-2 border">{item.updatedAt}</td>
<td className="p-2 border">{item.createdBy}</td>
<td className="p-2 border">{item.department}</td>
<td className="p-2 border">{item.status}</td>
<td className="p-2 border">{item.hiddenReason || "-"}</td>
</tr>
))}
</tbody>
</table>
);
}
Firestoreのproductsコレクションの構成
コレクション名：products
ドキュメントID：1Sps704FwN9IwpvCMdQX(画面から登録した際に発行されるUID)
フィールド：
| フィールド名 | データ |
|---|---|
| createdAt | 2025年7月10日 8:28:06 UTC+9（タイムスタンプ） |
| createdBy | "テスト"（文字列） |
| department | "テスト"（文字列） |
| expiryDate | "2025-07-10"（文字列） |
| hiddenReason | ""（文字列） |
| id | "1Sps704FwN9IwpvCMdQX"（文字列） |
| ingredients | "テスト"（文字列） |
| lotNumber | "1"（文字列） |
| manufacturer | "テスト"（文字列） |
| minStock | 1（数値） |
| name | "テスト"（文字列） |
| orderUnit | 1（数値） |
| origin | "テスト"（文字列） |
| packageSize | "テスト"（文字列） |
| price | 1（数値） |
| productionDate | "2025-07-17"（文字列） |
| purchaseDate | "2025-07-10"（文字列） |
| purchasePlace | "テスト"（文字列） |
| shippingBase | "テスト"（文字列） |
| shippingRestriction | "テスト"（文字列） |
| status | "テスト"（文字列） |
| stock | 1（数値） |
| storageLocation | "テスト"（文字列） |
| supplier | "テスト"（文字列） |
| supplierCompany | "テスト"（文字列） |
| temperatureZone | "テスト"（文字列） |
| weight | "100" |
UI
