feat: add CrudPanel component for consistent admin page layouts and c…

…reate button functionality
Projecte-UrbanTree · Feb 18, 2025 · 9487f04 · 9487f04
1 parent f42a74a
commit 9487f04
Show file tree

Hide file tree

Showing 12 changed files with 149 additions and 27 deletions.
diff --git a/resources/ts/components/Admin/CrudPanel.tsx b/resources/ts/components/Admin/CrudPanel.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Panel } from 'primereact/panel';
+import { Button } from 'primereact/button';
+import { Icon } from '@iconify/react';
+import { useTranslation } from 'react-i18next';
+
+interface CrudPanelProps {
+  title: string;
+  onCreate?: () => void;
+  createButtonLabel?: string;
+  children: React.ReactNode;
+}
+
+export default function CrudPanel({
+  title,
+  onCreate,
+  children,
+}: CrudPanelProps) {
+  const { t } = useTranslation();
+  return (
+    <Panel
+      headerTemplate={
+        <div className="bg-gray-50 border border-gray-200 px-6 py-4 flex justify-between items-center rounded">
+          <div className="text-xl font-bold text-gray-700">{t(title)}</div>
+          {onCreate && (
+            <div>
+              <Button onClick={onCreate}>
+                <Icon icon="tabler:plus" inline />
+                {t('admin.buttons.createNew')}
+              </Button>
+            </div>
+          )}
+        </div>
+      }>
+      {children}
+    </Panel>
+  );
+}
diff --git a/resources/ts/config/i18n/ca.json b/resources/ts/config/i18n/ca.json
@@ -53,6 +53,9 @@
             "customer": "Client",
             "unknown": "Desconegut"
         },
+        "buttons": {
+            "createNew": "Crear nou"
+        },
         "pages": {
             "dashboard": {
                 "title": "Tauler",

diff --git a/resources/ts/config/i18n/en.json b/resources/ts/config/i18n/en.json
@@ -142,6 +142,9 @@
             "stats": {
                 "title": "Statistics"
             }
+        },
+        "buttons": {
+            "createNew": "Create New"
         }
     },
     "general": {

diff --git a/resources/ts/config/i18n/es.json b/resources/ts/config/i18n/es.json
@@ -47,6 +47,9 @@
             "license": "Licencia",
             "logout": "Cerrar sesión"
         },
+        "buttons": {
+            "createNew": "Crear nuevo"
+        },
         "pages": {
             "dashboard": {
                 "welcome": {

diff --git a/resources/ts/pages/Admin/Settings/Contracts.tsx b/resources/ts/pages/Admin/Settings/Contracts.tsx
@@ -3,11 +3,13 @@ import { useState, useEffect } from 'react';
 import { DataTable } from 'primereact/datatable';
 import { Column } from 'primereact/column';
 import { Button } from 'primereact/button';
+import { Panel } from 'primereact/panel';
 
 import { Icon } from '@iconify/react';
 
 import axiosClient from '@/api/axiosClient';
 import { useTranslation } from 'react-i18next';
+import CrudPanel from '@/components/Admin/CrudPanel';
 
 export default function Contracts() {
   const [isLoading, setIsLoading] = useState(true);
@@ -30,8 +32,16 @@ export default function Contracts() {
 
   return (
     <>
-      <div className="bg-white rounded p-6 mb-8 border border-gray-300">
-        <DataTable loading={isLoading} value={contracts}>
+      <CrudPanel
+        title="admin.pages.contracts.title"
+        onCreate={() => console.log('Create new contract')}>
+        <DataTable
+          loading={isLoading}
+          value={contracts}
+          paginator
+          rows={10}
+          stripedRows
+          showGridlines>
           <Column
             field="name"
             header={t('admin.pages.contracts.columns.name')}
@@ -67,7 +77,7 @@ export default function Contracts() {
             )}
           />
         </DataTable>
-      </div>
+      </CrudPanel>
     </>
   );
 }
diff --git a/resources/ts/pages/Admin/Settings/ElementTypes.tsx b/resources/ts/pages/Admin/Settings/ElementTypes.tsx
@@ -3,11 +3,13 @@ import { useState, useEffect } from 'react';
 import { DataTable } from 'primereact/datatable';
 import { Column } from 'primereact/column';
 import { Button } from 'primereact/button';
+import { Panel } from 'primereact/panel';
 
 import { Icon } from '@iconify/react';
 
 import axiosClient from '@/api/axiosClient';
 import { useTranslation } from 'react-i18next';
+import CrudPanel from '@/components/Admin/CrudPanel';
 
 export default function ElementTypes() {
   const [isLoading, setIsLoading] = useState(true);
@@ -30,8 +32,16 @@ export default function ElementTypes() {
 
   return (
     <>
-      <div className="bg-white rounded p-6 mb-8 border border-gray-300">
-        <DataTable loading={isLoading} value={elementTypes}>
+      <CrudPanel
+        title="admin.pages.elementTypes.title"
+        onCreate={() => console.log('Create new element type')}>
+        <DataTable
+          loading={isLoading}
+          value={elementTypes}
+          paginator
+          rows={10}
+          stripedRows
+          showGridlines>
           <Column
             field="name"
             header={t('admin.pages.elementTypes.columns.name')}
@@ -63,7 +73,7 @@ export default function ElementTypes() {
             )}
           />
         </DataTable>
-      </div>
+      </CrudPanel>
     </>
   );
 }
diff --git a/resources/ts/pages/Admin/Settings/ResourceTypes.tsx b/resources/ts/pages/Admin/Settings/ResourceTypes.tsx
@@ -3,11 +3,13 @@ import { useState, useEffect } from 'react';
 import { DataTable } from 'primereact/datatable';
 import { Column } from 'primereact/column';
 import { Button } from 'primereact/button';
+import { Panel } from 'primereact/panel';
 
 import { Icon } from '@iconify/react';
 
 import axiosClient from '@/api/axiosClient';
 import { useTranslation } from 'react-i18next';
+import CrudPanel from '@/components/Admin/CrudPanel';
 
 export default function ResourceTypes() {
   const [isLoading, setIsLoading] = useState(true);
@@ -30,8 +32,16 @@ export default function ResourceTypes() {
 
   return (
     <>
-      <div className="bg-white rounded p-6 mb-8 border border-gray-300">
-        <DataTable loading={isLoading} value={resourceTypes}>
+      <CrudPanel
+        title="admin.pages.resourceTypes.title"
+        onCreate={() => console.log('Create new resource type')}>
+        <DataTable
+          loading={isLoading}
+          value={resourceTypes}
+          paginator
+          rows={10}
+          stripedRows
+          showGridlines>
           <Column
             field="name"
             header={t('admin.pages.resourceTypes.columns.name')}
@@ -51,7 +61,7 @@ export default function ResourceTypes() {
             )}
           />
         </DataTable>
-      </div>
+      </CrudPanel>
     </>
   );
 }
diff --git a/resources/ts/pages/Admin/Settings/Resources.tsx b/resources/ts/pages/Admin/Settings/Resources.tsx
@@ -8,6 +8,7 @@ import { Icon } from '@iconify/react';
 
 import axiosClient from '@/api/axiosClient';
 import { useTranslation } from 'react-i18next';
+import CrudPanel from '@/components/Admin/CrudPanel';
 
 export default function Resources() {
   const [isLoading, setIsLoading] = useState(true);
@@ -30,8 +31,16 @@ export default function Resources() {
 
   return (
     <>
-      <div className="bg-white rounded p-6 mb-8 border border-gray-300">
-        <DataTable loading={isLoading} value={resources}>
+      <CrudPanel
+        title="admin.pages.resources.title"
+        onCreate={() => console.log('Create new resource')}>
+        <DataTable
+          loading={isLoading}
+          value={resources}
+          paginator
+          rows={10}
+          stripedRows
+          showGridlines>
           <Column
             field="name"
             header={t('admin.pages.resources.columns.name')}
@@ -55,7 +64,7 @@ export default function Resources() {
             )}
           />
         </DataTable>
-      </div>
+      </CrudPanel>
     </>
   );
 }
diff --git a/resources/ts/pages/Admin/Settings/TaskTypes.tsx b/resources/ts/pages/Admin/Settings/TaskTypes.tsx
@@ -3,11 +3,13 @@ import { useState, useEffect } from 'react';
 import { DataTable } from 'primereact/datatable';
 import { Column } from 'primereact/column';
 import { Button } from 'primereact/button';
+import { Panel } from 'primereact/panel';
 
 import { Icon } from '@iconify/react';
 
 import axiosClient from '@/api/axiosClient';
 import { useTranslation } from 'react-i18next';
+import CrudPanel from '@/components/Admin/CrudPanel';
 
 export default function TaskTypes() {
   const [isLoading, setIsLoading] = useState(true);
@@ -30,8 +32,16 @@ export default function TaskTypes() {
 
   return (
     <>
-      <div className="bg-white rounded p-6 mb-8 border border-gray-300">
-        <DataTable loading={isLoading} value={taskTypes}>
+      <CrudPanel
+        title="admin.pages.taskTypes.title"
+        onCreate={() => console.log('Create new task type')}>
+        <DataTable
+          loading={isLoading}
+          value={taskTypes}
+          paginator
+          rows={10}
+          stripedRows
+          showGridlines>
           <Column
             field="name"
             header={t('admin.pages.taskTypes.columns.name')}
@@ -51,7 +61,7 @@ export default function TaskTypes() {
             )}
           />
         </DataTable>
-      </div>
+      </CrudPanel>
     </>
   );
 }
diff --git a/resources/ts/pages/Admin/Settings/TreeTypes.tsx b/resources/ts/pages/Admin/Settings/TreeTypes.tsx
@@ -3,11 +3,14 @@ import { useState, useEffect } from 'react';
 import { DataTable } from 'primereact/datatable';
 import { Column } from 'primereact/column';
 import { Button } from 'primereact/button';
+import { Panel } from 'primereact/panel';
+import { Toolbar } from 'primereact/toolbar';
 
 import { Icon } from '@iconify/react';
 
 import axiosClient from '@/api/axiosClient';
 import { useTranslation } from 'react-i18next';
+import CrudPanel from '@/components/Admin/CrudPanel';
 
 export default function TreeTypes() {
   const [isLoading, setIsLoading] = useState(true);
@@ -30,8 +33,16 @@ export default function TreeTypes() {
 
   return (
     <>
-      <div className="bg-white rounded p-6 mb-8 border border-gray-300">
-        <DataTable loading={isLoading} value={treeTypes}>
+      <CrudPanel
+        title="admin.pages.treeTypes.title"
+        onCreate={() => console.log('Create new tree type')}>
+        <DataTable
+          loading={isLoading}
+          value={treeTypes}
+          paginator
+          rows={10}
+          stripedRows
+          showGridlines>
           <Column
             field="family"
             header={t('admin.pages.treeTypes.columns.family')}
@@ -55,7 +66,7 @@ export default function TreeTypes() {
             )}
           />
         </DataTable>
-      </div>
+      </CrudPanel>
     </>
   );
 }
diff --git a/resources/ts/pages/Admin/Settings/Users.tsx b/resources/ts/pages/Admin/Settings/Users.tsx
@@ -9,6 +9,7 @@ import { Icon } from '@iconify/react';
 
 import axiosClient from '@/api/axiosClient';
 import { useTranslation } from 'react-i18next';
+import CrudPanel from '@/components/Admin/CrudPanel';
 
 export default function Users() {
   const [isLoading, setIsLoading] = useState(true);
@@ -31,8 +32,16 @@ export default function Users() {
 
   return (
     <>
-      <div className="bg-white rounded p-6 mb-8 border border-gray-300">
-        <DataTable loading={isLoading} value={users}>
+      <CrudPanel
+        title="admin.pages.users.title"
+        onCreate={() => console.log('Create new user')}>
+        <DataTable
+          loading={isLoading}
+          value={users}
+          paginator
+          rows={10}
+          stripedRows
+          showGridlines>
           <Column field="name" header={t('admin.pages.users.columns.name')} />
           <Column
             field="surname"
@@ -82,7 +91,7 @@ export default function Users() {
             )}
           />
         </DataTable>
-      </div>
+      </CrudPanel>
     </>
   );
 }
diff --git a/resources/ts/pages/Admin/WorkOrders.tsx b/resources/ts/pages/Admin/WorkOrders.tsx
@@ -1,13 +1,11 @@
 import { useState, useEffect } from 'react';
-
 import { DataTable } from 'primereact/datatable';
 import { Column } from 'primereact/column';
 import { Button } from 'primereact/button';
-
 import { Icon } from '@iconify/react';
-
 import axiosClient from '@/api/axiosClient';
 import { useTranslation } from 'react-i18next';
+import CrudPanel from '@/components/Admin/CrudPanel';
 
 export default function WorkOrders() {
   const [isLoading, setIsLoading] = useState(true);
@@ -30,8 +28,16 @@ export default function WorkOrders() {
 
   return (
     <>
-      <div className="bg-white rounded p-6 mb-8 border border-gray-300">
-        <DataTable loading={isLoading} value={workOrders}>
+      <CrudPanel
+        title="admin.pages.workOrders.title"
+        onCreate={() => console.log('Create new work order')}>
+        <DataTable
+          loading={isLoading}
+          value={workOrders}
+          paginator
+          rows={10}
+          stripedRows
+          showGridlines>
           <Column
             field="date"
             header={t('admin.pages.workOrders.columns.date')}
@@ -55,7 +61,7 @@ export default function WorkOrders() {
             )}
           />
         </DataTable>
-      </div>
+      </CrudPanel>
     </>
   );
 }