()
+ const activeTab = store.select.logs.getActiveTab(store.getState())
+
+ return (
+ <>
+
+ onClose()}
+ />
+
+ dispatch.logs.setOpenLogs({
+ tabId: activeTab.id,
+ logs: [],
+ })
+ }
+ />
+
+ dispatch.logs.setOpenLogs({
+ tabId: activeTab.id,
+ logs: activeTab.logs.map((_, index) => index),
+ })
+ }
+ />
+
+
+ {logs.map((log, index) => {
+ return (
+
+ )
+ })}
+
+
+ )
+}
+
+export default LogsList
diff --git a/vite/src/admin/logs-page/components/Tab.tsx b/vite/src/admin/logs-page/components/Tab.tsx
new file mode 100644
index 00000000..468b32f8
--- /dev/null
+++ b/vite/src/admin/logs-page/components/Tab.tsx
@@ -0,0 +1,44 @@
+import React, { ButtonHTMLAttributes } from 'react'
+import { XCircleIcon } from '@heroicons/react/16/solid'
+import { twJoin } from 'tailwind-merge'
+
+type TabProps = ButtonHTMLAttributes & {
+ active: boolean
+ name: string
+ onDelete?: () => void
+}
+
+const Tab: React.FC = ({ name, active, onDelete, ...props }) => {
+ return (
+ <>
+
+
+ )
+}
+
+export default Tab
diff --git a/vite/src/admin/logs-page/components/TabContent.tsx b/vite/src/admin/logs-page/components/TabContent.tsx
new file mode 100644
index 00000000..7762a5db
--- /dev/null
+++ b/vite/src/admin/logs-page/components/TabContent.tsx
@@ -0,0 +1,44 @@
+import React, { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+import { Dispatch, store } from '@/admin/logs-page/store'
+import FilesList from '@/admin/logs-page/components/FilesList'
+import LogsList from '@/admin/logs-page/components/LogsList'
+import { ILogTab } from '@/types/WpLog'
+
+type TabContentProps = {
+ tab: ILogTab
+}
+
+const TabContent: React.FC = ({ tab }) => {
+ const dispatch = useDispatch()
+ const activeTab = store.select.logs.getActiveTab(store.getState())
+ const activeFile = tab.activeFile
+
+ useEffect(() => {
+ if (activeFile) {
+ dispatch.logs.fetchLogs({ tabId: tab.id, activeFile })
+ }
+ }, [dispatch, tab.id, activeFile])
+
+ if (activeTab.id !== tab.id) return
+
+ return (
+ <>
+ {!activeFile && }
+
+ {activeFile && (
+ {
+ dispatch.logs.setActiveFile({
+ tab,
+ file: undefined,
+ })
+ }}
+ />
+ )}
+
+ )
+}
+
+export default TabContent
diff --git a/vite/src/admin/logs-page/index.css b/vite/src/admin/logs-page/index.css
new file mode 100644
index 00000000..bd6213e1
--- /dev/null
+++ b/vite/src/admin/logs-page/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/vite/src/admin/logs-page/main.tsx b/vite/src/admin/logs-page/main.tsx
new file mode 100644
index 00000000..8899503e
--- /dev/null
+++ b/vite/src/admin/logs-page/main.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import './index.css'
+import App from './App'
+
+document.addEventListener('DOMContentLoaded', () => {
+ document.querySelectorAll('.billwerk-logs').forEach((el) => {
+ ReactDOM.createRoot(el!).render(
+
+
+ ,
+ )
+ })
+})
diff --git a/vite/src/admin/logs-page/store/index.ts b/vite/src/admin/logs-page/store/index.ts
new file mode 100644
index 00000000..6ef890a4
--- /dev/null
+++ b/vite/src/admin/logs-page/store/index.ts
@@ -0,0 +1,22 @@
+import { init, RematchDispatch, RematchRootState } from '@rematch/core'
+import immerPlugin from '@rematch/immer'
+import loadingPlugin, { ExtraModelsFromLoading } from '@rematch/loading'
+import updatedPlugin, { ExtraModelsFromUpdated } from '@rematch/updated'
+import { models, RootModel } from '@/admin/logs-page/store/models'
+import selectPlugin from '@rematch/select'
+
+type FullModel = ExtraModelsFromLoading &
+ ExtraModelsFromUpdated
+
+export const store = init({
+ models,
+ plugins: [
+ immerPlugin(),
+ loadingPlugin({ type: 'full' }),
+ updatedPlugin(),
+ selectPlugin(),
+ ],
+})
+export type Store = typeof store
+export type Dispatch = RematchDispatch
+export type RootState = RematchRootState