fix: 認証・RLS・UI修正と不要なデバッグコードの整理

src/components/Companies.tsx → src/app/companies/_components/Companies.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
-import supabase from "../lib/supabase";
-import { Database } from "../lib/database.types";
-import Link from "next/link";
+import supabase from "../../../lib/supabase";
+import { Database } from "../../../lib/database.types";
 
 type ICompany = Database["public"]["Tables"]["companies"]["Row"];
 
@@ -18,51 +17,34 @@ export default function Companies() {
   }
 
   return (
-    <>
-      <div className="py-6 px-4 bg-white">
-        <h1 className="text-xl sm:text-2xl font-semibold text-gray-900">
-          企業
-        </h1>
-
-        <div className="sm:flex">
-          <div className="flex items-center space-x-2 sm:space-x-3 ml-auto">
-            <Link
-              href="/companies/new"
-              className="w-1/2 text-white bg-cyan-600 hover:bg-cyan-700 focus:ring-4 focus:ring-cyan-200 font-medium inline-flex items-center justify-center rounded-lg text-sm px-3 py-2 text-center sm:w-auto"
-            >
-              追加
-            </Link>
-          </div>
-        </div>
-      </div>
-
+    <div id="app-companies" className="w-full">
       <div className="overflow-x-auto">
         <div className="align-middle inline-block min-w-full">
           <div className="shadow overflow-hidden">
             <table className="table-fixed min-w-full divide-y divide-gray-200">
-              <thead className="bg-gray-100">
+              <thead className="bg-gray-200">
                 <tr>
                   <th
                     scope="col"
-                    className="p-4 text-left text-xs font-medium text-gray-500 uppercase"
+                    className="p-2 text-left text-xs font-medium text-gray-500 uppercase"
                   >
                     Id
                   </th>
                   <th
                     scope="col"
-                    className="p-4 text-left text-xs font-medium text-gray-500 uppercase"
+                    className="p-2 text-left text-xs font-medium text-gray-500 uppercase"
                   >
                     Name
                   </th>
                   <th
                     scope="col"
-                    className="p-4 text-left text-xs font-medium text-gray-500 uppercase"
+                    className="p-2 text-left text-xs font-medium text-gray-500 uppercase"
                   >
                     Website
                   </th>
                   <th
                     scope="col"
-                    className="p-4 text-left text-xs font-medium text-gray-500 uppercase"
+                    className="p-2 text-left text-xs font-medium text-gray-500 uppercase"
                   >
                     Memo
                   </th>
@@ -78,7 +60,7 @@ export default function Companies() {
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 }
 
@@ -88,7 +70,7 @@ type CompanyProps = {
 
 function Company({ company }: CompanyProps) {
   return (
-    <tr className="hover:bg-gray-100">
+    <tr className="hover:bg-indigo-100">
       <td className="p-4 whitespace-nowrap text-base font-medium text-gray-900">
         {company.id}
       </td>

src/components/NewCompany.tsx → src/app/companies/_components/NewCompanyForm.tsx

@@ -1,13 +1,18 @@
+'use client';
+
+import * as React from "react";
 import { useForm } from "react-hook-form";
-import supabase from "../lib/supabase";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
+import supabase from '@/lib/supabase';
+import { Button } from "@/components/ui/button";
 
 type Input = {
   name: string;
   website: string;
+  memo: string;
 };
 
-export default function NewCompany() {
+export default function NewCompanyForm() {
   const router = useRouter();
   const {
     register,
@@ -16,22 +21,31 @@ export default function NewCompany() {
     formState: { errors },
   } = useForm<Input>();
 
+  const [submitError, setSubmitError] = React.useState<string | null>(null);
+
   const onSubmit = handleSubmit(async (data) => {
+    setSubmitError(null);
     console.log(data);
 
     const { error } = await supabase.from("companies").insert(data);
-    console.log(error);
+    if (error) {
+      setSubmitError(error.message);
+      console.log(error);
+      return;
+    }
     reset();
-    router.push("/companies");
   });
 
   return (
-    <div className="bg-white">
+    <div id="new-company-form" className="bg-white">
       <section className="py-6 px-4 mx-auto max-w-2xl">
         <h1 className="text-xl sm:text-2xl font-semibold text-gray-900 pb-6">
           新規企業追加
         </h1>
         <form onSubmit={onSubmit}>
+          {submitError && (
+            <div className="text-red-600 mb-4">{submitError}</div>
+          )}
           <div className="grid gap-4 sm:grid-cols-2 sm:gap-6">
             <div className="sm:col-span-2">
               <label
@@ -80,12 +94,9 @@ export default function NewCompany() {
               ></textarea>
             </div>
           </div>
-          <button
-            type="submit"
-            className="inline-flex items-center px-5 py-2.5 mt-4 sm:mt-6 text-sm font-medium text-center text-white bg-primary-700 rounded-lg focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-900 hover:bg-primary-800"
-          >
+          <Button type="submit">
             追加
-          </button>
+          </Button>
         </form>
       </section>
     </div>

src/app/companies/layout.tsx

@@ -1,9 +1,9 @@
-import MultiLayout from "@components/layouts/MulitLayout";
+import AppLayout from "@components/layouts/AppLayout";
 
 export default function DashboardLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  return MultiLayout({ children });
+  return AppLayout({ children });
 }

src/app/companies/new/page.tsx

@@ -0,0 +1,31 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import AppPageHeader from "@/components/AppPageHeader";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import NewCompanyForm from "../_components/NewCompanyForm";
+
+export default function NewCompany() {
+  return (
+    <div id="app-docs-new">
+      <AppPageHeader title="Docs">
+        <Button asChild>
+          <Link href="/docs/new">企業追加</Link>
+        </Button>
+      </AppPageHeader>
+      <div id="app-page-body">
+        <div className="container">
+          <div className="flex justify-center p-6 relative">
+            <Card className="w-full max-w-xl">
+              <CardHeader>
+                <CardTitle>企業追加</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <NewCompanyForm />
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/companies/page.tsx

@@ -1,11 +1,25 @@
 "use client";
 
-import Companies from "@components/Companies";
+import AppPageHeader from "@/components/AppPageHeader";
+import Companies from "@/app/companies/_components/Companies";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
 
 export default function CompaniesPage() {
   return (
-    <>
-      <Companies />
-    </>
+    <div id="app-companies-index">
+      <AppPageHeader title="企業">
+        <Button asChild>
+          <Link href="/companies/new">企業追加</Link>
+        </Button>
+      </AppPageHeader>
+      <div id="app-page-body">
+        <div className="container">
+          <div className="flex flex-col items-center py-8 gap-6">
+            <Companies />
+          </div>
+        </div>
+      </div>
+    </div>
   );
 }

src/app/dashboard/layout.tsx

@@ -1,9 +1,9 @@
-import MultiLayout from "@components/layouts/MulitLayout";
+import AppLayout from "@components/layouts/AppLayout";
 
 export default function DashboardLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  return MultiLayout({ children });
+  return AppLayout({ children });
 }

src/app/dashboard/page.tsx

@@ -1,9 +1,14 @@
-import "@/app/globals.css";
+"use client";
 
-export default async function Dashboard() {
+import AppPageHeader from "@/components/AppPageHeader";
+
+export default function CompaniesPage() {
   return (
-    <>
-      <h2>ダッシュボード</h2>
-    </>
+    <div id="app-companies-index">
+      <AppPageHeader title="ダッシュボード">
+      </AppPageHeader>
+      <div id="app-page-body">
+      </div>
+    </div>
   );
 }

src/app/docs/[id]/edit/page.tsx

@@ -1,6 +1,6 @@
 import { updateDoc } from "../../_actions/updateDoc";
 import { createClient } from "@/utils/supabase/server";
-import SingleLayout from "@/components/layouts/SingleLayout";
+import WelcomeLayout from "@/components/layouts/WelcomeLayout";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
@@ -25,7 +25,7 @@ export default async function EditDoc({
   }
 
   return (
-    <SingleLayout>
+    <WelcomeLayout>
       <div className="flex justify-center items-center min-h-screen p-6 relative">
         <Card className="w-full max-w-xl">
           <CardHeader>
@@ -67,6 +67,6 @@ export default async function EditDoc({
           </CardContent>
         </Card>
       </div>
-    </SingleLayout>
+    </WelcomeLayout>
   );
 }