Dark mod tüm komponentlere eklendi
This commit is contained in:
Sedat Öztürk
parent
549bb1aa76
commit
08a2297a66
56 changed files with 782 additions and 697 deletions
|
|
@ -18188,6 +18188,12 @@
|
|||
"en": "Data Source",
|
||||
"tr": "Veri Kaynağı"
|
||||
},
|
||||
{
|
||||
"resourceName": "Platform",
|
||||
"key": "App.DeveloperKit.CrudEndpoints.DataSourceDescription",
|
||||
"en": "Data source of the CRUD endpoints",
|
||||
"tr": "CRUD endpointlerinin veri kaynağı"
|
||||
},
|
||||
{
|
||||
"resourceName": "Platform",
|
||||
"key": "App.DeveloperKit.CrudEndpoints.Loading",
|
||||
|
|
|
|||
|
|
@ -226,7 +226,6 @@ public class QueryManager : PlatformDomainService, IQueryManager
|
|||
};
|
||||
}
|
||||
sql = $"DELETE FROM \"{listForm.SelectCommand}\" WHERE {where}";
|
||||
Console.WriteLine(sql);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -349,7 +349,7 @@
|
|||
"CustomComponents": [
|
||||
{
|
||||
"name": "DynamicEntityComponent",
|
||||
"code": "import React, { useEffect, useState } from \"react\";\nimport axios from \"axios\";\n\ninterface DynamicEntityComponentProps {\n title: string;\n}\n\nconst api = axios.create({\n baseURL: \"https://localhost:44344\", // defaults'ı her seferinde set etme\n});\n\nconst DynamicEntityComponent: React.FC<DynamicEntityComponentProps> = ({ title }) => {\n const [data, setData] = useState<Array<{ id: string; name: string }>>([]);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState<string | null>(null);\n\n useEffect(() => {\n const fetchData = async () => {\n setLoading(true);\n setError(null);\n\n try {\n const res = await api.get(`/api/app/crudendpoint/${title}`);\n const raw = Array.isArray(res.data) ? res.data : res.data?.items ?? [];\n\n const filtered = raw.map((item: any) => ({\n id: item.Id ?? item.id,\n name: item.Name ?? item.name,\n }));\n\n setData(filtered);\n } catch (err: any) {\n setError(err.message || \"Failed to fetch data\");\n } finally {\n setLoading(false);\n }\n };\n\n if (title) fetchData();\n }, [title]);\n\n if (loading) return <div>Loading...</div>;\n if (error) return <div className=\"text-red-600\">Error: {error}</div>;\n if (!data.length) return <div>No records found</div>;\n\n const headers = [\"id\", \"name\", \"actions\"];\n\n return (\n <div className=\"overflow-auto\">\n <table className=\"min-w-full bg-white border border-slate-200 shadow-sm rounded-lg\">\n <thead className=\"bg-slate-100\">\n <tr>\n {headers.map((key) => (\n <th\n key={key}\n className=\"text-left px-4 py-2 border-b border-slate-200 text-sm font-medium text-slate-700\"\n >\n {key === \"actions\" ? \"Actions\" : key}\n </th>\n ))}\n </tr>\n </thead>\n <tbody>\n {data.map((item, rowIndex) => (\n <tr key={rowIndex} className=\"hover:bg-slate-50\">\n <td className=\"px-4 py-2 border-b border-slate-100 text-sm text-slate-800\">\n {item.id}\n </td>\n <td className=\"px-4 py-2 border-b border-slate-100 text-sm text-slate-800\">\n {item.name}\n </td>\n <td className=\"px-4 py-2 border-b border-slate-100\">\n <button\n type=\"button\"\n onClick={() => alert(item.name)}\n className=\"bg-blue-600 hover:bg-blue-700 text-white text-sm px-3 py-1 rounded-lg shadow-sm transition\"\n >\n Show Name\n </button>\n </td>\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n );\n};\n\nexport default DynamicEntityComponent;",
|
||||
"code": "import React, { useEffect, useState } from \"react\";\nimport axios from \"axios\";\n\ninterface DynamicEntityComponentProps {\n title: string;\n}\n\nconst api = axios.create({\n baseURL: \"https://localhost:44344\",\n});\n\nconst DynamicEntityComponent: React.FC<DynamicEntityComponentProps> = ({ title }) => {\n const [data, setData] = useState<Array<{ id: string; name: string }>>([]);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState<string | null>(null);\n\n useEffect(() => {\n const fetchData = async () => {\n setLoading(true);\n setError(null);\n\n try {\n const res = await api.get(`/api/app/crudendpoint/${title}`);\n const raw = Array.isArray(res.data) ? res.data : res.data?.items ?? [];\n\n const filtered = raw.map((item: any) => ({\n id: item.Id ?? item.id,\n name: item.Name ?? item.name,\n }));\n\n setData(filtered);\n } catch (err: any) {\n setError(err.message || \"Failed to fetch data\");\n } finally {\n setLoading(false);\n }\n };\n\n if (title) fetchData();\n }, [title]);\n\n if (loading) return <div>Loading...</div>;\n if (error) return <div className=\"text-red-600 dark:text-red-400\">Error: {error}</div>;\n if (!data.length) return <div>No records found</div>;\n\n const headers = [\"id\", \"name\", \"actions\"];\n\n return (\n <div className=\"overflow-auto\">\n <table className=\"min-w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 shadow-sm rounded-lg\">\n <thead className=\"bg-slate-100 dark:bg-slate-800\">\n <tr>\n {headers.map((key) => (\n <th\n key={key}\n className=\"text-left px-4 py-2 border-b border-slate-200 dark:border-slate-700 text-sm font-medium text-slate-700 dark:text-slate-200\"\n >\n {key === \"actions\" ? \"Actions\" : key}\n </th>\n ))}\n </tr>\n </thead>\n <tbody>\n {data.map((item, rowIndex) => (\n <tr key={rowIndex} className=\"hover:bg-slate-50 dark:hover:bg-slate-800\">\n <td className=\"px-4 py-2 border-b border-slate-100 dark:border-slate-800 text-sm text-slate-800 dark:text-slate-100\">\n {item.id}\n </td>\n <td className=\"px-4 py-2 border-b border-slate-100 dark:border-slate-800 text-sm text-slate-800 dark:text-slate-100\">\n {item.name}\n </td>\n <td className=\"px-4 py-2 border-b border-slate-100 dark:border-slate-800\">\n <button\n type=\"button\"\n onClick={() => alert(item.name)}\n className=\"bg-blue-600 hover:bg-blue-700 dark:bg-blue-800 dark:hover:bg-blue-900 text-white text-sm px-3 py-1 rounded-lg shadow-sm transition\"\n >\n Show Name\n </button>\n </td>\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n );\n};\n\nexport default DynamicEntityComponent;",
|
||||
"props": null,
|
||||
"description": null,
|
||||
"isActive": true,
|
||||
|
|
|
|||
|
|
@ -16,16 +16,16 @@ const ComponentSelector: React.FC<ComponentSelectorProps> = ({
|
|||
onRefresh
|
||||
}) => {
|
||||
return (
|
||||
<div className="p-4 bg-white border-b">
|
||||
<div className="p-4 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-200">
|
||||
Select Component
|
||||
</label>
|
||||
<Button
|
||||
variant='solid'
|
||||
size="sm"
|
||||
onClick={onRefresh}
|
||||
className="px-3 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600 transition-colors"
|
||||
className="px-3 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white transition-colors"
|
||||
title="Refresh component list"
|
||||
>
|
||||
Refresh
|
||||
|
|
@ -34,7 +34,7 @@ const ComponentSelector: React.FC<ComponentSelectorProps> = ({
|
|||
<select
|
||||
value={selectedComponentId || ''}
|
||||
onChange={(e) => onSelectComponent(e.target.value || null)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400"
|
||||
>
|
||||
<option value="">No component selected</option>
|
||||
{components.map(component => (
|
||||
|
|
|
|||
|
|
@ -31,33 +31,33 @@ export const PanelManager: React.FC<PanelManagerProps> = ({
|
|||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
|
||||
<div className="bg-white rounded-lg shadow-xl w-96 max-w-full mx-4">
|
||||
<div className="flex items-center justify-between p-4 border-b border-gray-200">
|
||||
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl w-96 max-w-full mx-4">
|
||||
<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center space-x-2">
|
||||
<FaBars className="w-5 h-5 text-blue-600" />
|
||||
<h2 className="text-base font-semibold text-gray-900">Panel Manager</h2>
|
||||
<FaBars className="w-5 h-5 text-blue-600 dark:text-blue-400" />
|
||||
<h2 className="text-base font-semibold text-gray-900 dark:text-gray-100">Panel Manager</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1 hover:bg-gray-100 rounded transition-colors"
|
||||
className="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
|
||||
title="Kapat"
|
||||
>
|
||||
<FaTimes className="w-5 h-5 text-gray-500" />
|
||||
<FaTimes className="w-5 h-5 text-gray-500 dark:text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<p className="text-sm text-gray-600 mb-4">Customize Workspace</p>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300 mb-4">Customize Workspace</p>
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-medium text-gray-900">Panels</h3>
|
||||
<h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">Panels</h3>
|
||||
{paneller.map(({ key, label, icon: Icon }) => (
|
||||
<div key={key} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||||
<div key={key} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Icon className="w-4 h-4 text-gray-600" />
|
||||
<span className="text-sm font-medium text-gray-700">{label}</span>
|
||||
<Icon className="w-4 h-4 text-gray-600 dark:text-gray-300" />
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-200">{label}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => onPanelToggle(key)}
|
||||
className={`p-1 rounded transition-colors ${panelState[key] ? "text-blue-600 hover:bg-blue-100" : "text-gray-400 hover:bg-gray-200"}`}
|
||||
className={`p-1 rounded transition-colors ${panelState[key] ? "text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900" : "text-gray-400 dark:text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
|
||||
title={panelState[key] ? "Hide" : "Show"}
|
||||
>
|
||||
{panelState[key] ? <FaEye className="w-4 h-4" /> : <FaEyeSlash className="w-4 h-4" />}
|
||||
|
|
|
|||
|
|
@ -228,10 +228,10 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
|
|||
}
|
||||
return (
|
||||
<div key={property.name} className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
|
||||
{property.name}
|
||||
{property.description && (
|
||||
<span className="text-gray-500 text-xs ml-1">
|
||||
<span className="text-gray-500 dark:text-gray-400 text-xs ml-1">
|
||||
({property.description})
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -251,7 +251,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
|
|||
}
|
||||
className="mr-2"
|
||||
/>
|
||||
<span className="text-sm text-gray-600">{property.name}</span>
|
||||
<span className="text-sm text-gray-600 dark:text-gray-300">{property.name}</span>
|
||||
</label>
|
||||
)}
|
||||
|
||||
|
|
@ -261,7 +261,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
|
|||
onChange={(e) =>
|
||||
handleLocalPropertyChange(property.name, e.target.value)
|
||||
}
|
||||
className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400"
|
||||
>
|
||||
<option value="">Select {property.name}</option>
|
||||
{property.options.map((option) => (
|
||||
|
|
@ -280,13 +280,13 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
|
|||
onChange={(e) =>
|
||||
handleLocalPropertyChange(property.name, e.target.value)
|
||||
}
|
||||
className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400"
|
||||
placeholder={`Enter ${property.name}`}
|
||||
/>
|
||||
{isTailwindProperty && (
|
||||
<button
|
||||
onClick={() => openTailwindModal(property.name)}
|
||||
className="px-3 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors text-sm"
|
||||
className="px-3 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white transition-colors text-sm"
|
||||
title="Select Tailwind Classes"
|
||||
>
|
||||
TW
|
||||
|
|
@ -299,7 +299,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
|
|||
onChange={(e) =>
|
||||
handleLocalPropertyChange(property.name, e.target.value)
|
||||
}
|
||||
className="w-10 h-10 border border-gray-300 rounded-md"
|
||||
className="w-10 h-10 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800"
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
|
@ -313,13 +313,13 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
|
|||
onChange={(e) =>
|
||||
handleLocalPropertyChange(property.name, e.target.value)
|
||||
}
|
||||
className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400"
|
||||
placeholder={`Enter ${property.name}`}
|
||||
/>
|
||||
{isTailwindProperty && (
|
||||
<button
|
||||
onClick={() => openTailwindModal(property.name)}
|
||||
className="px-3 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors text-sm"
|
||||
className="px-3 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white transition-colors text-sm"
|
||||
title="Select Tailwind Classes"
|
||||
>
|
||||
TW
|
||||
|
|
@ -332,7 +332,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
|
|||
onChange={(e) =>
|
||||
handleLocalPropertyChange(property.name, e.target.value)
|
||||
}
|
||||
className="w-10 h-10 border border-gray-300 rounded-md"
|
||||
className="w-10 h-10 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800"
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
|
@ -345,14 +345,14 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
|
|||
onChange={(e) =>
|
||||
handleLocalPropertyChange(property.name, Number(e.target.value))
|
||||
}
|
||||
className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400"
|
||||
/>
|
||||
)}
|
||||
|
||||
{property.type === "array" && (
|
||||
<>
|
||||
<textarea
|
||||
className="flex-1 px-3 py-2 border border-gray-300 rounded-md font-mono text-xs focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md font-mono text-xs focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400"
|
||||
rows={Math.max(3, arrayInputValue.split('\n').length)}
|
||||
value={arrayInputValue}
|
||||
onChange={(e) => {
|
||||
|
|
@ -406,11 +406,11 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
|
|||
|
||||
if (!selectedComponent) {
|
||||
return (
|
||||
<div className="h-full bg-gray-50 p-4">
|
||||
<div className="text-center text-gray-500 mt-8">
|
||||
<div className="h-full bg-gray-50 dark:bg-gray-900 p-4">
|
||||
<div className="text-center text-gray-500 dark:text-gray-400 mt-8">
|
||||
<div className="text-4xl mb-4">🎯</div>
|
||||
<h3 className="text-lg font-medium mb-2">No Component Selected</h3>
|
||||
<p className="text-sm">
|
||||
<h3 className="text-lg font-medium mb-2 text-gray-700 dark:text-gray-200">No Component Selected</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Select a component from the editor to edit its properties
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -480,7 +480,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
|
|||
return (
|
||||
<div className="w-full text-white flex flex-col h-full">
|
||||
{/* Header */}
|
||||
<div className="border-b bg-gray-50 flex items-center justify-between">
|
||||
<div className="border-b bg-gray-50 dark:bg-gray-900 flex items-center justify-between dark:border-gray-700">
|
||||
<div>
|
||||
{(hasChanges || hasHookChanges) && (
|
||||
<p className="text-sm text-orange-600 mt-1">
|
||||
|
|
@ -488,22 +488,22 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
|
|||
</p>
|
||||
)}
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-2 mt-4">
|
||||
<div className="flex gap-2 p-1">
|
||||
<button
|
||||
className={`px-3 py-1 rounded-t-md font-medium border-b-2 transition-colors ${
|
||||
className={`px-3 py-1 font-medium border-b-2 transition-colors ${
|
||||
activeTab === "props"
|
||||
? "border-blue-500 text-blue-700 bg-white"
|
||||
: "border-transparent text-gray-500 bg-gray-100"
|
||||
? "border-blue-500 text-blue-700 bg-white dark:bg-gray-900 dark:text-blue-400 dark:border-blue-400"
|
||||
: "border-transparent text-gray-500 bg-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:border-transparent"
|
||||
}`}
|
||||
onClick={() => setActiveTab("props")}
|
||||
>
|
||||
Properties
|
||||
</button>
|
||||
<button
|
||||
className={`px-3 py-1 rounded-t-md font-medium border-b-2 transition-colors ${
|
||||
className={`px-3 py-1 font-medium border-b-2 transition-colors ${
|
||||
activeTab === "hooks"
|
||||
? "border-blue-500 text-blue-700 bg-white"
|
||||
: "border-transparent text-gray-500 bg-gray-100"
|
||||
? "border-blue-500 text-blue-700 bg-white dark:bg-gray-900 dark:text-blue-400 dark:border-blue-400"
|
||||
: "border-transparent text-gray-500 bg-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:border-transparent"
|
||||
}`}
|
||||
onClick={() => setActiveTab("hooks")}
|
||||
>
|
||||
|
|
@ -515,7 +515,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
|
|||
<Button
|
||||
variant="solid"
|
||||
size="sm"
|
||||
className="mr-2 px-3 py-1 rounded bg-red-500 text-white hover:bg-red-600 transition-colors text-sm"
|
||||
className="mr-2 px-3 py-1 rounded bg-red-500 text-white hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 dark:text-white transition-colors text-sm"
|
||||
onClick={() => {
|
||||
if (selectedComponent) {
|
||||
if (
|
||||
|
|
@ -578,8 +578,8 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
|
|||
|
||||
{/* Content */}
|
||||
{activeTab === "props" && (
|
||||
<div className="flex-1 text-black overflow-y-auto p-4 max-h-[calc(100vh-200px)]">
|
||||
<h3 className="text-md font-medium text-gray-800 mb-4">Properties</h3>
|
||||
<div className="flex-1 text-black dark:text-gray-200 overflow-y-auto p-4 max-h-[calc(100vh-200px)] bg-white dark:bg-gray-900">
|
||||
<h3 className="text-md font-medium text-gray-800 dark:text-gray-100 mb-4">Properties</h3>
|
||||
{/* Properties */}
|
||||
{properties.length > 0 && (
|
||||
<div>{properties.map(renderPropertyControl)}</div>
|
||||
|
|
@ -587,7 +587,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
|
|||
{/* Events */}
|
||||
{events.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-md font-medium text-gray-800 mb-4 mt-6">
|
||||
<h3 className="text-md font-medium text-gray-800 dark:text-gray-100 mb-4 mt-6">
|
||||
Events
|
||||
</h3>
|
||||
{events.map(renderPropertyControl)}
|
||||
|
|
@ -596,7 +596,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
|
|||
{/* Styling */}
|
||||
{styling.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-md font-medium text-gray-800 mb-4 mt-6">
|
||||
<h3 className="text-md font-medium text-gray-800 dark:text-gray-100 mb-4 mt-6">
|
||||
Styling
|
||||
</h3>
|
||||
{styling.map(renderPropertyControl)}
|
||||
|
|
|
|||
|
|
@ -88,8 +88,8 @@ export const Splitter: React.FC<SplitterProps> = ({
|
|||
${
|
||||
isHorizontal ? "w-1 cursor-col-resize" : "h-1 cursor-row-resize"
|
||||
}
|
||||
bg-gray-300 hover:bg-blue-500 transition-colors duration-200 flex-shrink-0
|
||||
${isDragging ? "bg-blue-500" : ""}
|
||||
bg-gray-300 dark:bg-gray-700 hover:bg-blue-500 dark:hover:bg-blue-600 transition-colors duration-200 flex-shrink-0
|
||||
${isDragging ? "bg-blue-500 dark:bg-blue-600" : ""}
|
||||
`}
|
||||
onMouseDown={handleMouseDown}
|
||||
/>
|
||||
|
|
@ -124,8 +124,8 @@ export const Splitter: React.FC<SplitterProps> = ({
|
|||
${
|
||||
isHorizontal ? "w-1 cursor-col-resize" : "h-1 cursor-row-resize"
|
||||
}
|
||||
bg-gray-300 hover:bg-blue-500 transition-colors duration-200 flex-shrink-0
|
||||
${isDragging ? "bg-blue-500" : ""}
|
||||
bg-gray-300 dark:bg-gray-700 hover:bg-blue-500 dark:hover:bg-blue-600 transition-colors duration-200 flex-shrink-0
|
||||
${isDragging ? "bg-blue-500 dark:bg-blue-600" : ""}
|
||||
`}
|
||||
onMouseDown={handleMouseDown}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -51,17 +51,17 @@ export default function Widget({
|
|||
};
|
||||
}, [icon]);
|
||||
|
||||
const colorMap: Record<string, { bg: string; text: string }> = {
|
||||
blue: { bg: "from-blue-100 to-blue-200", text: "text-blue-600" },
|
||||
green: { bg: "from-green-100 to-green-200", text: "text-green-600" },
|
||||
purple: { bg: "from-purple-100 to-purple-200", text: "text-purple-600" },
|
||||
gray: { bg: "from-gray-100 to-gray-200", text: "text-gray-600" },
|
||||
red: { bg: "from-red-100 to-red-200", text: "text-red-600" },
|
||||
yellow: { bg: "from-yellow-100 to-yellow-200", text: "text-yellow-600" },
|
||||
pink: { bg: "from-pink-100 to-pink-200", text: "text-pink-600" },
|
||||
indigo: { bg: "from-indigo-100 to-indigo-200", text: "text-indigo-600" },
|
||||
teal: { bg: "from-teal-100 to-teal-200", text: "text-teal-600" },
|
||||
orange: { bg: "from-orange-100 to-orange-200", text: "text-orange-600" },
|
||||
const colorMap: Record<string, { bg: string; text: string; darkBg: string; darkText: string }> = {
|
||||
blue: { bg: 'from-blue-100 to-blue-200', text: 'text-blue-600', darkBg: 'from-blue-900 to-blue-800', darkText: 'text-blue-300' },
|
||||
green: { bg: 'from-green-100 to-green-200', text: 'text-green-600', darkBg: 'from-green-900 to-green-800', darkText: 'text-green-300' },
|
||||
purple: { bg: 'from-purple-100 to-purple-200', text: 'text-purple-600', darkBg: 'from-purple-900 to-purple-800', darkText: 'text-purple-300' },
|
||||
gray: { bg: 'from-gray-100 to-gray-200', text: 'text-gray-600', darkBg: 'from-gray-800 to-gray-700', darkText: 'text-gray-300' },
|
||||
red: { bg: 'from-red-100 to-red-200', text: 'text-red-600', darkBg: 'from-red-900 to-red-800', darkText: 'text-red-300' },
|
||||
yellow: { bg: 'from-yellow-100 to-yellow-200', text: 'text-yellow-600', darkBg: 'from-yellow-900 to-yellow-800', darkText: 'text-yellow-300' },
|
||||
pink: { bg: 'from-pink-100 to-pink-200', text: 'text-pink-600', darkBg: 'from-pink-900 to-pink-800', darkText: 'text-pink-300' },
|
||||
indigo: { bg: 'from-indigo-100 to-indigo-200', text: 'text-indigo-600', darkBg: 'from-indigo-900 to-indigo-800', darkText: 'text-indigo-300' },
|
||||
teal: { bg: 'from-teal-100 to-teal-200', text: 'text-teal-600', darkBg: 'from-teal-900 to-teal-800', darkText: 'text-teal-300' },
|
||||
orange: { bg: 'from-orange-100 to-orange-200', text: 'text-orange-600', darkBg: 'from-orange-900 to-orange-800', darkText: 'text-orange-300' },
|
||||
};
|
||||
|
||||
const safeColor = color && colorMap[color] ? color : "green";
|
||||
|
|
@ -70,28 +70,32 @@ export default function Widget({
|
|||
<div
|
||||
onClick={onClick}
|
||||
className={classNames(
|
||||
"bg-white rounded-lg shadow-sm border border-gray-200 p-4 flex flex-col justify-between",
|
||||
onClick && "cursor-pointer hover:bg-gray-50",
|
||||
'bg-white dark:bg-gray-900 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4 flex flex-col justify-between',
|
||||
onClick && 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800',
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-gray-600 tracking-wide">
|
||||
<p className="text-sm font-semibold text-gray-600 dark:text-gray-300 tracking-wide">
|
||||
{title}
|
||||
</p>
|
||||
<p
|
||||
className={`${valueClassName} font-bold mt-1 ${colorMap[safeColor].text}`}
|
||||
className={classNames(valueClassName, 'font-bold mt-1', colorMap[safeColor].text, 'dark:' + colorMap[safeColor].darkText)}
|
||||
>
|
||||
{value}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 mt-1">{subTitle}</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">{subTitle}</p>
|
||||
</div>
|
||||
<div
|
||||
className={`w-12 h-12 bg-gradient-to-br ${colorMap[safeColor].bg} rounded-xl flex items-center justify-center shadow-sm`}
|
||||
className={classNames(
|
||||
'w-12 h-12 bg-gradient-to-br rounded-xl flex items-center justify-center shadow-sm',
|
||||
colorMap[safeColor].bg,
|
||||
'dark:' + colorMap[safeColor].darkBg
|
||||
)}
|
||||
>
|
||||
{IconComponent ? (
|
||||
<IconComponent className={`w-6 h-6 ${colorMap[safeColor].text}`} />
|
||||
<IconComponent className={classNames('w-6 h-6', colorMap[safeColor].text, 'dark:' + colorMap[safeColor].darkText)} />
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,13 +12,13 @@ const ComponentPreview: React.FC<ComponentPreviewProps> = ({ componentName, clas
|
|||
const { components, loading } = useComponents()
|
||||
|
||||
if (!componentName) {
|
||||
return <div className="text-sm text-gray-500">Bileşen ismi yok.</div>
|
||||
return <div className="text-sm text-gray-500 dark:text-gray-400">Bileşen ismi yok.</div>
|
||||
}
|
||||
|
||||
// components dizisinin varlığını kontrol et
|
||||
if (loading || !components || !Array.isArray(components)) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen bg-gray-50">
|
||||
<div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||
<div className="text-center">
|
||||
<Loading loading={true} />
|
||||
</div>
|
||||
|
|
@ -47,7 +47,7 @@ const ComponentPreview: React.FC<ComponentPreviewProps> = ({ componentName, clas
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={`bg-white ${className}`}>
|
||||
<div className={`bg-white dark:bg-gray-900 ${className}`}>
|
||||
<DynamicRenderer componentName={componentName} dependencies={dependencies} />
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -193,7 +193,7 @@ const DynamicRenderer: React.FC<DynamicRendererProps> = ({
|
|||
|
||||
if (!Component)
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen bg-gray-50">
|
||||
<div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||
<div className="text-center">
|
||||
<Loading loading={!Component} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -51,17 +51,17 @@ export default function Widget({
|
|||
}
|
||||
}, [icon])
|
||||
|
||||
const colorMap: Record<string, { bg: string; text: string }> = {
|
||||
blue: { bg: 'from-blue-100 to-blue-200', text: 'text-blue-600' },
|
||||
green: { bg: 'from-green-100 to-green-200', text: 'text-green-600' },
|
||||
purple: { bg: 'from-purple-100 to-purple-200', text: 'text-purple-600' },
|
||||
gray: { bg: 'from-gray-100 to-gray-200', text: 'text-gray-600' },
|
||||
red: { bg: 'from-red-100 to-red-200', text: 'text-red-600' },
|
||||
yellow: { bg: 'from-yellow-100 to-yellow-200', text: 'text-yellow-600' },
|
||||
pink: { bg: 'from-pink-100 to-pink-200', text: 'text-pink-600' },
|
||||
indigo: { bg: 'from-indigo-100 to-indigo-200', text: 'text-indigo-600' },
|
||||
teal: { bg: 'from-teal-100 to-teal-200', text: 'text-teal-600' },
|
||||
orange: { bg: 'from-orange-100 to-orange-200', text: 'text-orange-600' },
|
||||
const colorMap: Record<string, { bg: string; text: string; darkBg: string; darkText: string }> = {
|
||||
blue: { bg: 'from-blue-100 to-blue-200', text: 'text-blue-600', darkBg: 'from-blue-900 to-blue-800', darkText: 'text-blue-300' },
|
||||
green: { bg: 'from-green-100 to-green-200', text: 'text-green-600', darkBg: 'from-green-900 to-green-800', darkText: 'text-green-300' },
|
||||
purple: { bg: 'from-purple-100 to-purple-200', text: 'text-purple-600', darkBg: 'from-purple-900 to-purple-800', darkText: 'text-purple-300' },
|
||||
gray: { bg: 'from-gray-100 to-gray-200', text: 'text-gray-600', darkBg: 'from-gray-800 to-gray-700', darkText: 'text-gray-300' },
|
||||
red: { bg: 'from-red-100 to-red-200', text: 'text-red-600', darkBg: 'from-red-900 to-red-800', darkText: 'text-red-300' },
|
||||
yellow: { bg: 'from-yellow-100 to-yellow-200', text: 'text-yellow-600', darkBg: 'from-yellow-900 to-yellow-800', darkText: 'text-yellow-300' },
|
||||
pink: { bg: 'from-pink-100 to-pink-200', text: 'text-pink-600', darkBg: 'from-pink-900 to-pink-800', darkText: 'text-pink-300' },
|
||||
indigo: { bg: 'from-indigo-100 to-indigo-200', text: 'text-indigo-600', darkBg: 'from-indigo-900 to-indigo-800', darkText: 'text-indigo-300' },
|
||||
teal: { bg: 'from-teal-100 to-teal-200', text: 'text-teal-600', darkBg: 'from-teal-900 to-teal-800', darkText: 'text-teal-300' },
|
||||
orange: { bg: 'from-orange-100 to-orange-200', text: 'text-orange-600', darkBg: 'from-orange-900 to-orange-800', darkText: 'text-orange-300' },
|
||||
}
|
||||
|
||||
const safeColor = color && colorMap[color] ? color : 'green'
|
||||
|
|
@ -70,22 +70,26 @@ export default function Widget({
|
|||
<div
|
||||
onClick={onClick}
|
||||
className={classNames(
|
||||
'bg-white rounded-lg shadow-sm border border-gray-200 p-4 flex flex-col justify-between',
|
||||
onClick && 'cursor-pointer hover:bg-gray-50',
|
||||
'bg-white dark:bg-gray-900 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4 flex flex-col justify-between',
|
||||
onClick && 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-gray-600">{title}</p>
|
||||
<p className={`${valueClassName} font-bold mt-1 ${colorMap[safeColor].text}`}>{value}</p>
|
||||
<p className="text-sm text-gray-500 mt-1">{subTitle}</p>
|
||||
<p className="text-sm font-semibold text-gray-600 dark:text-gray-300">{title}</p>
|
||||
<p className={classNames(valueClassName, 'font-bold mt-1', colorMap[safeColor].text, 'dark:' + colorMap[safeColor].darkText)}>{value}</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">{subTitle}</p>
|
||||
</div>
|
||||
<div
|
||||
className={`w-12 h-12 bg-gradient-to-br ${colorMap[safeColor].bg} rounded-xl flex items-center justify-center shadow-sm`}
|
||||
className={classNames(
|
||||
'w-12 h-12 bg-gradient-to-br rounded-xl flex items-center justify-center shadow-sm',
|
||||
colorMap[safeColor].bg,
|
||||
'dark:' + colorMap[safeColor].darkBg
|
||||
)}
|
||||
>
|
||||
{IconComponent ? (
|
||||
<IconComponent className={`w-6 h-6 ${colorMap[safeColor].text}`} />
|
||||
<IconComponent className={classNames('w-6 h-6', colorMap[safeColor].text, 'dark:' + colorMap[safeColor].darkText)} />
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -90,14 +90,14 @@ const ActivityLog = () => {
|
|||
defaultTitle={APP_NAME}
|
||||
></Helmet>
|
||||
|
||||
<AdaptableCard className="overflow-hidden">
|
||||
<AdaptableCard className="overflow-hidden bg-white dark:bg-gray-800">
|
||||
<div className="w-full">
|
||||
<div className="mb-5 flex items-center justify-between gap-3">
|
||||
<h3 className="text-xl font-semibold md:text-2xl">
|
||||
<h3 className="text-xl font-semibold md:text-2xl text-gray-900 dark:text-white">
|
||||
{translate('::Abp.Identity.ActivityLogs')}
|
||||
</h3>
|
||||
<Button
|
||||
className="lg:hidden"
|
||||
className="lg:hidden dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
|
||||
size="sm"
|
||||
variant="twoTone"
|
||||
onClick={() => setIsFilterDrawerOpen(true)}
|
||||
|
|
@ -107,7 +107,7 @@ const ActivityLog = () => {
|
|||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_340px]">
|
||||
<div className="min-w-0 rounded-xl border border-gray-200 bg-white p-4 lg:p-6">
|
||||
<div className="min-w-0 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 lg:p-6">
|
||||
<Log
|
||||
notifications={notifications}
|
||||
isLoading={loading}
|
||||
|
|
@ -117,7 +117,7 @@ const ActivityLog = () => {
|
|||
</div>
|
||||
|
||||
<div className="hidden lg:block">
|
||||
<LogFilter filter={filter} onFilterChange={handleFilterChange} useAffix />
|
||||
<LogFilter filter={filter} onFilterChange={handleFilterChange} useAffix className="dark:bg-gray-800" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -134,7 +134,7 @@ const ActivityLog = () => {
|
|||
filter={filter}
|
||||
onFilterChange={handleFilterChange}
|
||||
useAffix={false}
|
||||
className="border-none p-0"
|
||||
className="border-none p-0 dark:bg-gray-800"
|
||||
/>
|
||||
</Drawer>
|
||||
</AdaptableCard>
|
||||
|
|
|
|||
|
|
@ -31,12 +31,12 @@ const Log = ({
|
|||
<div className="w-full">
|
||||
{keys(notifications).map((group) => (
|
||||
<div key={group} className="mb-8">
|
||||
<div className="mb-4 font-semibold uppercase">
|
||||
<div className="mb-4 font-semibold uppercase text-gray-700 dark:text-gray-300">
|
||||
{dayjs(group).locale(currentLocale).format('LL')}
|
||||
</div>
|
||||
<Timeline>
|
||||
<Timeline className="dark:bg-gray-800">
|
||||
{isEmpty(notifications[group]) ? (
|
||||
<Timeline.Item>Bildirim yok</Timeline.Item>
|
||||
<Timeline.Item className="dark:text-gray-400">Bildirim yok</Timeline.Item>
|
||||
) : (
|
||||
notifications[group].map((notification, i) => (
|
||||
<Timeline.Item
|
||||
|
|
@ -46,6 +46,7 @@ const Log = ({
|
|||
userImg={AVATAR_URL(notification.creatorId, notification.tenantId)}
|
||||
/>
|
||||
}
|
||||
className="dark:bg-gray-800"
|
||||
>
|
||||
<Event data={notification} compact={false} />
|
||||
</Timeline.Item>
|
||||
|
|
@ -56,11 +57,11 @@ const Log = ({
|
|||
))}
|
||||
<div className="text-center">
|
||||
{loadable ? (
|
||||
<Button loading={isLoading} onClick={onLoadMore}>
|
||||
<Button loading={isLoading} onClick={onLoadMore} className="dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">
|
||||
{translate('::Abp.Identity.ActivityLogs.LoadMore')}
|
||||
</Button>
|
||||
) : (
|
||||
translate('::Abp.Identity.ActivityLogs.ReceivedAllNotifications')
|
||||
<span className="dark:text-gray-400">{translate('::Abp.Identity.ActivityLogs.ReceivedAllNotifications')}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -44,8 +44,8 @@ const LogFilter = ({
|
|||
const { translate } = useLocalization()
|
||||
|
||||
const content = (
|
||||
<div className={classNames('rounded-xl border border-gray-200 bg-white p-4', className)}>
|
||||
<h5 className="mb-4 text-base font-semibold">{translate('::Abp.Identity.ActivityLogs.Filters')}</h5>
|
||||
<div className={classNames('rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4', className)}>
|
||||
<h5 className="mb-4 text-base font-semibold text-gray-900 dark:text-white">{translate('::Abp.Identity.ActivityLogs.Filters')}</h5>
|
||||
<Checkbox.Group
|
||||
vertical
|
||||
value={filter}
|
||||
|
|
@ -53,11 +53,11 @@ const LogFilter = ({
|
|||
onFilterChange(value as string[])
|
||||
}}
|
||||
>
|
||||
<CategoryTitle className="mb-3 text-gray-500">
|
||||
<CategoryTitle className="mb-3 text-gray-500 dark:text-gray-400">
|
||||
{translate('::Abp.Identity.ActivityLogs.Channels')}
|
||||
</CategoryTitle>
|
||||
{ticketCheckboxes.map((checkbox) => (
|
||||
<Checkbox key={checkbox.value} className="mb-3" value={checkbox.value}>
|
||||
<Checkbox key={checkbox.value} className="mb-3 dark:text-white" value={checkbox.value}>
|
||||
{checkbox.label}
|
||||
</Checkbox>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -86,16 +86,16 @@ function AuditLogs({
|
|||
return (
|
||||
<Dialog width="90%" isOpen={open} onClose={onDialogClose} onRequestClose={onDialogClose}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-6 pb-4 border-b border-gray-200">
|
||||
<div className="flex items-center justify-between mb-6 pb-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div>
|
||||
<h4 className="text-xl font-bold text-gray-800">Audit Log Details</h4>
|
||||
{selectedLog?.id && <p className="text-sm text-gray-500 mt-1">ID: {selectedLog.id}</p>}
|
||||
<h4 className="text-xl font-bold text-gray-800 dark:text-gray-100">Audit Log Details</h4>
|
||||
{selectedLog?.id && <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">ID: {selectedLog.id}</p>}
|
||||
</div>
|
||||
{selectedLog?.httpStatusCode && (
|
||||
<div className="flex items-center gap-2">
|
||||
{getStatusBadge(selectedLog.httpStatusCode)}
|
||||
<Badge
|
||||
className="border border-gray-300 bg-white text-gray-700"
|
||||
className="border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200"
|
||||
content={selectedLog.applicationName}
|
||||
></Badge>
|
||||
</div>
|
||||
|
|
@ -108,32 +108,32 @@ function AuditLogs({
|
|||
</div>
|
||||
) : !selectedLog ? (
|
||||
<div className="text-center py-16">
|
||||
<FaExclamationCircle className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
||||
<p className="text-gray-500">No audit log found</p>
|
||||
<FaExclamationCircle className="w-16 h-16 text-gray-300 dark:text-gray-600 mx-auto mb-4" />
|
||||
<p className="text-gray-500 dark:text-gray-400">No audit log found</p>
|
||||
</div>
|
||||
) : (
|
||||
<Tabs defaultValue="log" variant="pill">
|
||||
<TabList className="mb-6 bg-gray-50 p-1 rounded-lg">
|
||||
<TabList className="mb-6 bg-gray-50 dark:bg-gray-800 p-1 rounded-lg">
|
||||
<TabNav value="log">
|
||||
<FaRegFileAlt className="w-4 h-4 mr-2" />
|
||||
Overview
|
||||
<span className="text-gray-700 dark:text-gray-200">Overview</span>
|
||||
</TabNav>
|
||||
<TabNav value="actions">
|
||||
<FaCode className="w-4 h-4 mr-2" />
|
||||
Actions
|
||||
<span className="text-gray-700 dark:text-gray-200">Actions</span>
|
||||
{selectedLog.actions?.length > 0 && (
|
||||
<Badge
|
||||
className="ml-2 bg-blue-500"
|
||||
className="ml-2 bg-blue-500 dark:bg-blue-700"
|
||||
content={`${selectedLog.actions.length}`}
|
||||
></Badge>
|
||||
)}
|
||||
</TabNav>
|
||||
<TabNav value="changes">
|
||||
<FaRegCheckCircle className="w-4 h-4 mr-2" />
|
||||
Entity Changes
|
||||
<span className="text-gray-700 dark:text-gray-200">Entity Changes</span>
|
||||
{selectedLog.entityChanges?.length > 0 && (
|
||||
<Badge
|
||||
className="ml-2 bg-purple-500"
|
||||
className="ml-2 bg-purple-500 dark:bg-purple-700"
|
||||
content={`${selectedLog.entityChanges.length}`}
|
||||
></Badge>
|
||||
)}
|
||||
|
|
@ -144,9 +144,9 @@ function AuditLogs({
|
|||
<TabContent value="log">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Request Information */}
|
||||
<AdaptableCard className="shadow-sm">
|
||||
<h6 className="font-semibold text-gray-700 mb-4 flex items-center gap-2">
|
||||
<FaGlobe className="w-5 h-5 text-blue-500" />
|
||||
<AdaptableCard className="shadow-sm dark:bg-gray-900 dark:border-gray-700">
|
||||
<h6 className="font-semibold text-gray-700 dark:text-gray-200 mb-4 flex items-center gap-2">
|
||||
<FaGlobe className="w-5 h-5 text-blue-500 dark:text-blue-400" />
|
||||
Request Information
|
||||
</h6>
|
||||
<div className="space-y-1">
|
||||
|
|
@ -154,7 +154,7 @@ function AuditLogs({
|
|||
icon={FaUser}
|
||||
label="User"
|
||||
value={selectedLog.userName || 'Anonymous'}
|
||||
valueClassName="font-medium text-gray-800"
|
||||
valueClassName="font-medium text-gray-800 dark:text-gray-100"
|
||||
/>
|
||||
<InfoRow
|
||||
icon={FaRegClock}
|
||||
|
|
@ -187,9 +187,9 @@ function AuditLogs({
|
|||
</AdaptableCard>
|
||||
|
||||
{/* HTTP Details */}
|
||||
<AdaptableCard className="shadow-sm">
|
||||
<h6 className="font-semibold text-gray-700 mb-4 flex items-center gap-2">
|
||||
<FaCode className="w-5 h-5 text-green-500" />
|
||||
<AdaptableCard className="shadow-sm dark:bg-gray-900 dark:border-gray-700">
|
||||
<h6 className="font-semibold text-gray-700 dark:text-gray-200 mb-4 flex items-center gap-2">
|
||||
<FaCode className="w-5 h-5 text-green-500 dark:text-green-400" />
|
||||
HTTP Details
|
||||
</h6>
|
||||
<div className="space-y-1">
|
||||
|
|
@ -222,13 +222,13 @@ function AuditLogs({
|
|||
icon={FaGlobe}
|
||||
label="URL"
|
||||
value={selectedLog.url}
|
||||
valueClassName="text-blue-600 font-mono text-xs"
|
||||
valueClassName="text-blue-600 dark:text-blue-400 font-mono text-xs"
|
||||
/>
|
||||
<InfoRow
|
||||
icon={FaRegFileAlt}
|
||||
label="Browser"
|
||||
value={
|
||||
<span className="text-xs text-gray-600 line-clamp-2">
|
||||
<span className="text-xs text-gray-600 dark:text-gray-400 line-clamp-2">
|
||||
{selectedLog.browserInfo || 'Unknown'}
|
||||
</span>
|
||||
}
|
||||
|
|
@ -238,12 +238,12 @@ function AuditLogs({
|
|||
|
||||
{/* Exceptions (Full Width) */}
|
||||
{selectedLog.exceptions && (
|
||||
<AdaptableCard className="lg:col-span-2 shadow-sm border-l-4 border-red-500">
|
||||
<h6 className="font-semibold text-red-600 mb-3 flex items-center gap-2">
|
||||
<AdaptableCard className="lg:col-span-2 shadow-sm border-l-4 border-red-500 dark:bg-gray-900 dark:border-gray-700">
|
||||
<h6 className="font-semibold text-red-600 dark:text-red-400 mb-3 flex items-center gap-2">
|
||||
<FaExclamationCircle className="w-5 h-5" />
|
||||
Exceptions
|
||||
</h6>
|
||||
<pre className="bg-red-50 text-red-700 p-4 rounded-lg text-xs whitespace-pre-wrap leading-relaxed font-mono overflow-x-auto">
|
||||
<pre className="bg-red-50 dark:bg-red-950 text-red-700 dark:text-red-300 p-4 rounded-lg text-xs whitespace-pre-wrap leading-relaxed font-mono overflow-x-auto">
|
||||
{selectedLog.exceptions}
|
||||
</pre>
|
||||
</AdaptableCard>
|
||||
|
|
@ -251,12 +251,12 @@ function AuditLogs({
|
|||
|
||||
{/* Comments */}
|
||||
{selectedLog.comments && (
|
||||
<AdaptableCard className="lg:col-span-2 shadow-sm bg-blue-50">
|
||||
<h6 className="font-semibold text-blue-700 mb-2 flex items-center gap-2">
|
||||
<AdaptableCard className="lg:col-span-2 shadow-sm bg-blue-50 dark:bg-blue-950 dark:border-gray-700">
|
||||
<h6 className="font-semibold text-blue-700 dark:text-blue-300 mb-2 flex items-center gap-2">
|
||||
<FaRegFileAlt className="w-5 h-5" />
|
||||
Comments
|
||||
</h6>
|
||||
<p className="text-sm text-blue-800">{selectedLog.comments}</p>
|
||||
<p className="text-sm text-blue-800 dark:text-blue-200">{selectedLog.comments}</p>
|
||||
</AdaptableCard>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -266,37 +266,37 @@ function AuditLogs({
|
|||
<TabContent value="actions">
|
||||
{!selectedLog.actions || selectedLog.actions.length === 0 ? (
|
||||
<div className="text-center py-16">
|
||||
<FaCode className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
||||
<p className="text-gray-500">No actions recorded</p>
|
||||
<FaCode className="w-16 h-16 text-gray-300 dark:text-gray-600 mx-auto mb-4" />
|
||||
<p className="text-gray-500 dark:text-gray-400">No actions recorded</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{selectedLog.actions.map((action, index) => (
|
||||
<AdaptableCard
|
||||
key={index}
|
||||
className="shadow-sm hover:shadow-md transition-shadow"
|
||||
className="shadow-sm hover:shadow-md transition-shadow dark:bg-gray-900 dark:border-gray-700"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<h6 className="font-semibold text-gray-700 flex items-center gap-2">
|
||||
<Badge className="bg-indigo-500" content={`#${index + 1}`}></Badge>
|
||||
<h6 className="font-semibold text-gray-700 dark:text-gray-200 flex items-center gap-2">
|
||||
<Badge className="bg-indigo-500 dark:bg-indigo-700" content={`#${index + 1}`}></Badge>
|
||||
<span className="text-sm">{action.methodName}</span>
|
||||
</h6>
|
||||
<Badge
|
||||
className="border border-gray-300 bg-white text-gray-700 text-xs"
|
||||
className="border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 text-xs"
|
||||
content={formatDuration(action.executionDuration)}
|
||||
></Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 mb-1">Service Name</p>
|
||||
<p className="text-sm font-mono text-gray-700 break-all">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Service Name</p>
|
||||
<p className="text-sm font-mono text-gray-700 dark:text-gray-200 break-all">
|
||||
{action.serviceName}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 mb-1">Execution Time</p>
|
||||
<p className="text-sm text-gray-700">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Execution Time</p>
|
||||
<p className="text-sm text-gray-700 dark:text-gray-200">
|
||||
{new Date(action.executionTime).toLocaleString('tr-TR')}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -304,8 +304,8 @@ function AuditLogs({
|
|||
|
||||
{action.parameters && (
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 mb-2">Parameters</p>
|
||||
<pre className="bg-gray-50 border border-gray-200 p-3 rounded-lg text-xs overflow-x-auto">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mb-2">Parameters</p>
|
||||
<pre className="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-3 rounded-lg text-xs overflow-x-auto text-gray-700 dark:text-gray-200">
|
||||
{JSON.stringify(JSON.parse(action.parameters), null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
|
|
@ -320,29 +320,29 @@ function AuditLogs({
|
|||
<TabContent value="changes">
|
||||
{!selectedLog.entityChanges || selectedLog.entityChanges.length === 0 ? (
|
||||
<div className="text-center py-16">
|
||||
<FaRegCheckCircle className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
||||
<p className="text-gray-500">No entity changes recorded</p>
|
||||
<FaRegCheckCircle className="w-16 h-16 text-gray-300 dark:text-gray-600 mx-auto mb-4" />
|
||||
<p className="text-gray-500 dark:text-gray-400">No entity changes recorded</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{selectedLog.entityChanges.map((change, index) => (
|
||||
<AdaptableCard
|
||||
key={index}
|
||||
className="shadow-sm hover:shadow-md transition-shadow"
|
||||
className="shadow-sm hover:shadow-md transition-shadow dark:bg-gray-900 dark:border-gray-700"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge className="bg-purple-500" content={`#${index + 1}`}></Badge>
|
||||
<Badge className="bg-purple-500 dark:bg-purple-700" content={`#${index + 1}`}></Badge>
|
||||
<div>
|
||||
<h6 className="font-semibold text-gray-700">
|
||||
<h6 className="font-semibold text-gray-700 dark:text-gray-200">
|
||||
{change.entityTypeFullName}
|
||||
</h6>
|
||||
<p className="text-xs text-gray-500">ID: {change.entityId}</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">ID: {change.entityId}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{getChangeTypeBadge(change.changeType)}
|
||||
<span className="text-xs text-gray-500">
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{new Date(change.changeTime).toLocaleTimeString('tr-TR')}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -350,16 +350,16 @@ function AuditLogs({
|
|||
|
||||
{change.propertyChanges && change.propertyChanges.length > 0 && (
|
||||
<div>
|
||||
<p className="text-xs font-medium text-gray-600 mb-3">Property Changes</p>
|
||||
<p className="text-xs font-medium text-gray-600 dark:text-gray-300 mb-3">Property Changes</p>
|
||||
<div className="space-y-2">
|
||||
{change.propertyChanges.map((prop, i) => (
|
||||
<div key={i} className="bg-gray-50 p-3 rounded-lg">
|
||||
<div key={i} className="bg-gray-50 dark:bg-gray-800 p-3 rounded-lg">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<code className="text-sm font-semibold text-indigo-600">
|
||||
<code className="text-sm font-semibold text-indigo-600 dark:text-indigo-400">
|
||||
{prop.propertyName}
|
||||
</code>
|
||||
<span className="text-xs text-gray-500 ml-2">
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400 ml-2">
|
||||
({prop.propertyTypeFullName?.split('.').pop()})
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -367,16 +367,16 @@ function AuditLogs({
|
|||
{!prop.originalValue ||
|
||||
prop.originalValue === 'null' ||
|
||||
prop.originalValue === '[Not Tracked]' ? (
|
||||
<span className="px-3 py-1 bg-green-100 text-green-700 rounded-md font-medium">
|
||||
<span className="px-3 py-1 bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 rounded-md font-medium">
|
||||
{prop.newValue || 'null'}
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
<span className="px-3 py-1 bg-gray-100 text-gray-600 rounded-md">
|
||||
<span className="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-md">
|
||||
{prop.originalValue}
|
||||
</span>
|
||||
<span className="text-gray-400">→</span>
|
||||
<span className="px-3 py-1 bg-yellow-100 text-yellow-700 rounded-md font-medium">
|
||||
<span className="text-gray-400 dark:text-gray-500">→</span>
|
||||
<span className="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300 rounded-md font-medium">
|
||||
{prop.newValue || 'null'}
|
||||
</span>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -804,22 +804,22 @@ const OrgChart = () => {
|
|||
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Toolbar */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 pb-1 border-b">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 pb-1 border-b border-slate-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
{MenuIcon}
|
||||
<h4 className="text-sm font-medium truncate">
|
||||
<h4 className="text-sm font-medium truncate text-gray-900 dark:text-white">
|
||||
{translate('::App.Definitions.OrgChart') || 'Organizasyon Şeması'}
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<div className="flex items-center bg-slate-100 rounded-lg p-1 gap-1">
|
||||
<div className="flex items-center bg-slate-100 dark:bg-gray-800 rounded-lg p-1 gap-1">
|
||||
<button
|
||||
onClick={() => setMode('department')}
|
||||
className={`flex items-center gap-1.5 px-2 py-1.5 rounded-md text-xs sm:text-sm font-medium transition-colors ${
|
||||
mode === 'department'
|
||||
? 'bg-blue-600 text-white shadow-sm'
|
||||
: 'text-slate-600 hover:text-slate-800'
|
||||
: 'text-slate-600 dark:text-gray-300 hover:text-slate-800 dark:hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<FaBuilding className="w-3.5 h-3.5 flex-shrink-0" />
|
||||
|
|
@ -830,7 +830,7 @@ const OrgChart = () => {
|
|||
className={`flex items-center gap-1.5 px-2 py-1.5 rounded-md text-xs sm:text-sm font-medium transition-colors ${
|
||||
mode === 'jobPosition'
|
||||
? 'bg-purple-600 text-white shadow-sm'
|
||||
: 'text-slate-600 hover:text-slate-800'
|
||||
: 'text-slate-600 dark:text-gray-300 hover:text-slate-800 dark:hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<FaBriefcase className="w-3.5 h-3.5 flex-shrink-0" />
|
||||
|
|
@ -838,39 +838,39 @@ const OrgChart = () => {
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center bg-slate-100 rounded-lg p-1 gap-1">
|
||||
<label className="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs sm:text-sm text-slate-600 select-none cursor-pointer">
|
||||
<div className="flex items-center bg-slate-100 dark:bg-gray-800 rounded-lg p-1 gap-1">
|
||||
<label className="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs sm:text-sm text-slate-600 dark:text-gray-300 select-none cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={showUsers}
|
||||
onChange={(e) => setShowUsers(e.target.checked)}
|
||||
className="h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
|
||||
className="h-4 w-4 rounded border-slate-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="hidden sm:inline">{translate('::App.Definitions.OrgChart.ShowUsers') || 'Kullanıcılar'}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center bg-slate-100 rounded-lg p-1 gap-1">
|
||||
<div className="flex items-center bg-slate-100 dark:bg-gray-800 rounded-lg p-1 gap-1">
|
||||
<button
|
||||
onClick={handleZoomOut}
|
||||
className="p-1.5 sm:p-2 rounded-md text-slate-600 hover:text-slate-800 hover:bg-white"
|
||||
className="p-1.5 sm:p-2 rounded-md text-slate-600 dark:text-gray-300 hover:text-slate-800 dark:hover:text-white hover:bg-white dark:hover:bg-gray-700"
|
||||
title="Zoom Out"
|
||||
>
|
||||
<FaSearchMinus className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<span className="text-xs font-medium text-slate-600 px-1 min-w-[36px] sm:min-w-[46px] text-center">
|
||||
<span className="text-xs font-medium text-slate-600 dark:text-gray-300 px-1 min-w-[36px] sm:min-w-[46px] text-center">
|
||||
{Math.round(zoom * 100)}%
|
||||
</span>
|
||||
<button
|
||||
onClick={handleZoomIn}
|
||||
className="p-1.5 sm:p-2 rounded-md text-slate-600 hover:text-slate-800 hover:bg-white"
|
||||
className="p-1.5 sm:p-2 rounded-md text-slate-600 dark:text-gray-300 hover:text-slate-800 dark:hover:text-white hover:bg-white dark:hover:bg-gray-700"
|
||||
title="Zoom In"
|
||||
>
|
||||
<FaSearchPlus className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleZoomReset}
|
||||
className="p-1.5 sm:p-2 rounded-md text-slate-600 hover:text-slate-800 hover:bg-white"
|
||||
className="p-1.5 sm:p-2 rounded-md text-slate-600 dark:text-gray-300 hover:text-slate-800 dark:hover:text-white hover:bg-white dark:hover:bg-gray-700"
|
||||
title="Reset Zoom"
|
||||
>
|
||||
<FaUndo className="w-3.5 h-3.5" />
|
||||
|
|
@ -880,7 +880,7 @@ const OrgChart = () => {
|
|||
<button
|
||||
onClick={handleExportJpg}
|
||||
disabled={exporting || loading}
|
||||
className="flex items-center gap-1.5 px-2 py-1.5 rounded-lg text-xs sm:text-sm font-medium bg-slate-100 text-slate-600 hover:bg-slate-200 disabled:opacity-50 transition-colors"
|
||||
className="flex items-center gap-1.5 p-1.5 sm:p-2 rounded-lg text-xs sm:text-sm font-medium bg-slate-100 dark:bg-gray-800 text-slate-600 dark:text-gray-300 hover:bg-slate-200 dark:hover:bg-gray-700 disabled:opacity-50 transition-colors"
|
||||
title="JPG olarak indir"
|
||||
>
|
||||
<FaFileImage className="w-3.5 h-3.5 flex-shrink-0" />
|
||||
|
|
|
|||
|
|
@ -193,8 +193,8 @@ const FormEdit = () => {
|
|||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<Tabs defaultValue="details" variant="pill">
|
||||
<TabList className="flex-wrap border-b mb-2 bg-slate-50">
|
||||
<Tabs defaultValue="details" variant="underline">
|
||||
<TabList className="flex-wrap border-b mb-2 bg-slate-50 dark:bg-slate-800">
|
||||
{visibleTabs.includes('details') && (
|
||||
<TabNav value="details">{translate('::ListForms.ListFormEdit.TabDetails')}</TabNav>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -87,7 +87,6 @@ const step1ValidationSchema = Yup.object().shape({
|
|||
wizardName: Yup.string().required(),
|
||||
menuCode: Yup.string().required(),
|
||||
permissionGroupName: Yup.string().required(),
|
||||
menuParentCode: Yup.string().required(),
|
||||
languageTextMenuEn: Yup.string().required(),
|
||||
languageTextMenuTr: Yup.string().required(),
|
||||
})
|
||||
|
|
|
|||
|
|
@ -452,7 +452,6 @@ const WizardStep1 = ({
|
|||
|
||||
const step1Missing = [
|
||||
!wizardName && translate('::ListForms.Wizard.Step1.WizardName'),
|
||||
!values.menuParentCode && translate('::ListForms.Wizard.Step1.MenuParent'),
|
||||
!values.permissionGroupName && translate('::ListForms.Wizard.Step1.PermissionGroupName'),
|
||||
!values.languageTextMenuEn && translate('::ListForms.Wizard.Step4.MenuEn'),
|
||||
!values.languageTextMenuTr && translate('::ListForms.Wizard.Step4.MenuTr'),
|
||||
|
|
@ -489,9 +488,8 @@ const WizardStep1 = ({
|
|||
{/* Menu Parent */}
|
||||
<FormItem
|
||||
label={translate('::ListForms.Wizard.Step1.MenuParent')}
|
||||
invalid={errors.menuParentCode && touched.menuParentCode}
|
||||
errorMessage={errors.menuParentCode}
|
||||
asterisk={true}
|
||||
invalid={false}
|
||||
errorMessage={undefined}
|
||||
extra={
|
||||
<div className="flex items-center gap-2 ml-3">
|
||||
<button
|
||||
|
|
@ -532,7 +530,7 @@ const WizardStep1 = ({
|
|||
nodes={menuTree}
|
||||
rawItems={rawMenuItems}
|
||||
isLoading={isLoadingMenu}
|
||||
invalid={!!(errors.menuParentCode && touched.menuParentCode)}
|
||||
invalid={false}
|
||||
onReload={onReloadMenu}
|
||||
initialExpanded={values.menuParentCode ? getAncestorCodes(rawMenuItems, values.menuParentCode) : undefined}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -632,7 +632,7 @@ function GroupCard({
|
|||
className={`rounded-xl border-2 transition-all ${
|
||||
isOver
|
||||
? 'border-indigo-400 bg-indigo-50/60 dark:bg-indigo-900/20'
|
||||
: 'border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-850'
|
||||
: 'border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900'
|
||||
}`}
|
||||
>
|
||||
{/* Group Header */}
|
||||
|
|
@ -642,7 +642,7 @@ function GroupCard({
|
|||
value={group.caption}
|
||||
onChange={(e) => onCaptionChange(e.target.value)}
|
||||
placeholder="Group caption…"
|
||||
className="flex-1 min-w-[120px] text-sm font-semibold h-7 px-2 rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 focus:outline-none focus:border-indigo-400"
|
||||
className="flex-1 min-w-[120px] text-sm font-semibold h-7 px-2 rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-gray-100 focus:outline-none focus:border-indigo-400"
|
||||
/>
|
||||
{/* ColCount */}
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
|
|
@ -694,7 +694,7 @@ function GroupCard({
|
|||
isOver
|
||||
? 'bg-indigo-100/60 dark:bg-indigo-900/30 border border-dashed border-indigo-400'
|
||||
: group.items.length === 0
|
||||
? 'border border-dashed border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800'
|
||||
? 'border border-dashed border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -125,14 +125,14 @@ function PermissionDialogContent({
|
|||
const permKey = permission.name || ''
|
||||
return (
|
||||
<div key={permission.name} className={`ml-${permission.level * 4} group`}>
|
||||
<div className="flex items-center gap-2 px-2 py-0.5 rounded-md hover:bg-gray-50 transition-all">
|
||||
<div className="flex items-center gap-2 px-2 py-0.5 rounded-md hover:bg-gray-50 transition-all dark:hover:bg-gray-700">
|
||||
{isParentPerm ? (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
togglePermission(permKey)
|
||||
}}
|
||||
className="w-5 h-5 flex items-center justify-center rounded hover:bg-gray-200 transition"
|
||||
className="w-5 h-5 flex items-center justify-center rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition"
|
||||
>
|
||||
{openPermissions[permKey] || searchTerm ? (
|
||||
<FaChevronDown className="text-gray-500 text-xs" />
|
||||
|
|
@ -148,7 +148,7 @@ function PermissionDialogContent({
|
|||
checked={permission.isGranted}
|
||||
onChange={() => onClickCheckbox(permission)}
|
||||
>
|
||||
<span className="text-sm text-gray-700 group-hover:text-gray-900 transition">
|
||||
<span className="text-sm text-gray-700 group-hover:text-gray-900 transition dark:text-gray-300 dark:group-hover:text-gray-100">
|
||||
{translate('::' + permission.displayName)}
|
||||
</span>
|
||||
</Checkbox>
|
||||
|
|
|
|||
|
|
@ -119,14 +119,14 @@ function UserPermissionDialogContent({
|
|||
const permKey = permission.name || ''
|
||||
return (
|
||||
<div key={permission.name} className={`ml-${permission.level * 4} group`}>
|
||||
<div className="flex items-center gap-2 px-2 py-0.5 rounded-md hover:bg-gray-50 transition-all">
|
||||
<div className="flex items-center gap-2 px-2 py-0.5 rounded-md hover:bg-gray-50 transition-all dark:hover:bg-gray-700">
|
||||
{isParentPerm ? (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
togglePermission(permKey)
|
||||
}}
|
||||
className="w-5 h-5 flex items-center justify-center rounded hover:bg-gray-200 transition"
|
||||
className="w-5 h-5 flex items-center justify-center rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition"
|
||||
>
|
||||
{openPermissions[permKey] || searchTerm ? (
|
||||
<FaChevronDown className="text-gray-500 text-xs" />
|
||||
|
|
@ -145,7 +145,7 @@ function UserPermissionDialogContent({
|
|||
(provider: any) => provider.providerName === 'R',
|
||||
)}
|
||||
>
|
||||
<span className="text-sm text-gray-700 group-hover:text-gray-900 transition">
|
||||
<span className="text-sm text-gray-700 group-hover:text-gray-900 transition dark:text-gray-300 dark:group-hover:text-gray-100">
|
||||
{translate('::' + permission.displayName)}
|
||||
{permission.grantedProviders.map((provider: any) => {
|
||||
const badgeContent =
|
||||
|
|
|
|||
|
|
@ -30,13 +30,13 @@ const Dashboard: React.FC = () => {
|
|||
title={translate('::' + 'App.Videoroom.Dashboard')}
|
||||
defaultTitle="Erp Platform"
|
||||
></Helmet>
|
||||
<div className="flex items-center justify-center p-4">
|
||||
<div className="flex items-center justify-center p-4 bg-white dark:bg-gray-900 min-h-screen">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="text-center w-full max-w-4xl"
|
||||
>
|
||||
<p className="text-lg sm:text-xl text-gray-600 mb-8 sm:mb-12">
|
||||
<p className="text-lg sm:text-xl text-gray-600 dark:text-gray-300 mb-8 sm:mb-12">
|
||||
{translate('::' + 'App.Videoroom.RoleSelector')}
|
||||
</p>
|
||||
|
||||
|
|
@ -45,13 +45,13 @@ const Dashboard: React.FC = () => {
|
|||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={() => handleRoleSelect('teacher')}
|
||||
className="bg-white rounded-lg shadow-lg p-6 sm:p-8 hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-blue-500"
|
||||
className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 sm:p-8 hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400"
|
||||
>
|
||||
<FaCrown size={48} className="mx-auto text-blue-600 mb-4 sm:mb-4" />
|
||||
<h2 className="text-xl sm:text-2xl font-bold text-gray-800 mb-2">
|
||||
<h2 className="text-xl sm:text-2xl font-bold text-gray-800 dark:text-white mb-2">
|
||||
{translate('::' + 'App.Videoroom.Host')}
|
||||
</h2>
|
||||
<p className="text-gray-600 text-sm sm:text-base">
|
||||
<p className="text-gray-600 dark:text-gray-300 text-sm sm:text-base">
|
||||
{translate('::' + 'App.Videoroom.HostDescription')}
|
||||
</p>
|
||||
</motion.button>
|
||||
|
|
@ -60,13 +60,13 @@ const Dashboard: React.FC = () => {
|
|||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={() => handleRoleSelect('student')}
|
||||
className="bg-white rounded-lg shadow-lg p-6 sm:p-8 hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-green-500"
|
||||
className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 sm:p-8 hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-green-500 dark:hover:border-green-400"
|
||||
>
|
||||
<FaUsers size={48} className="mx-auto text-green-600 mb-4 sm:mb-4" />
|
||||
<h2 className="text-xl sm:text-2xl font-bold text-gray-800 mb-2">
|
||||
<h2 className="text-xl sm:text-2xl font-bold text-gray-800 dark:text-white mb-2">
|
||||
{translate('::' + 'App.Videoroom.Participant')}
|
||||
</h2>
|
||||
<p className="text-gray-600 text-sm sm:text-base">
|
||||
<p className="text-gray-600 dark:text-gray-300 text-sm sm:text-base">
|
||||
{translate('::' + 'App.Videoroom.ParticipantDescription')}
|
||||
</p>
|
||||
</motion.button>
|
||||
|
|
@ -75,13 +75,13 @@ const Dashboard: React.FC = () => {
|
|||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={() => handleRoleSelect('observer')}
|
||||
className="bg-white rounded-lg shadow-lg p-6 sm:p-8 hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-purple-500 md:col-span-2 lg:col-span-1"
|
||||
className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 sm:p-8 hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-purple-500 dark:hover:border-purple-400 md:col-span-2 lg:col-span-1"
|
||||
>
|
||||
<FaEye size={48} className="mx-auto text-purple-600 mb-4 sm:mb-4" />
|
||||
<h2 className="text-xl sm:text-2xl font-bold text-gray-800 mb-2">
|
||||
<h2 className="text-xl sm:text-2xl font-bold text-gray-800 dark:text-white mb-2">
|
||||
{translate('::' + 'App.Videoroom.Observer')}
|
||||
</h2>
|
||||
<p className="text-gray-600 text-sm sm:text-base">
|
||||
<p className="text-gray-600 dark:text-gray-300 text-sm sm:text-base">
|
||||
{translate('::' + 'App.Videoroom.ObserverDescription')}
|
||||
</p>
|
||||
</motion.button>
|
||||
|
|
|
|||
|
|
@ -274,19 +274,20 @@ const RoomList: React.FC = () => {
|
|||
<div
|
||||
className={classNames(
|
||||
'flex items-center gap-2 pb-1 border-b',
|
||||
mode === 'light' ? 'border-gray-200' : 'border-neutral-700',
|
||||
mode === 'light' ? 'border-gray-200' : 'border-neutral-700 dark:border-gray-700',
|
||||
'bg-white dark:bg-gray-900'
|
||||
)}
|
||||
>
|
||||
<FcVideoCall size={24} />
|
||||
<h4 className="text-sm font-medium">{translate('::App.Videoroom.List')}</h4>
|
||||
<h4 className="text-sm font-medium text-gray-900 dark:text-white">{translate('::App.Videoroom.List')}</h4>
|
||||
|
||||
<div className="flex gap-1 ml-auto items-center">
|
||||
<div className="flex-1 relative">
|
||||
<FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-slate-400" />
|
||||
<FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-slate-400 dark:text-gray-500" />
|
||||
<Input
|
||||
size="sm"
|
||||
type="text"
|
||||
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder="Search..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
|
|
@ -352,11 +353,11 @@ const RoomList: React.FC = () => {
|
|||
</div>
|
||||
|
||||
{/* Scheduled Classes */}
|
||||
<div className="bg-white rounded-lg shadow-md">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-md">
|
||||
{videoList.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<FaCalendarAlt size={48} className="mx-auto text-gray-400 mb-4" />
|
||||
<p className="text-sm text-gray-400 text-center py-4">
|
||||
<FaCalendarAlt size={48} className="mx-auto text-gray-400 dark:text-gray-600 mb-4" />
|
||||
<p className="text-sm text-gray-400 dark:text-gray-500 text-center py-4">
|
||||
{translate('::App.Videoroom.NoScheduledRooms') ||
|
||||
'No scheduled classes found. Please create a new class.'}
|
||||
</p>
|
||||
|
|
@ -379,17 +380,17 @@ const RoomList: React.FC = () => {
|
|||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.05 }}
|
||||
className={`bg-white border border-gray-100 border-l-4 ${accentColor} rounded-xl shadow-sm hover:shadow-md transition-all duration-200`}
|
||||
className={`bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-700 border-l-4 ${accentColor.replace('border-l-', 'dark:border-l-')} rounded-xl shadow-sm hover:shadow-md transition-all duration-200`}
|
||||
>
|
||||
{/* Card Header */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 p-4 pb-3">
|
||||
<div className="flex flex-col gap-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<h3 className="text-sm font-semibold text-gray-900 truncate">
|
||||
<h3 className="text-sm font-semibold text-gray-900 dark:text-white truncate">
|
||||
{classSession.name}
|
||||
</h3>
|
||||
<span
|
||||
className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${className}`}
|
||||
className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${className} dark:bg-opacity-80`}
|
||||
>
|
||||
{status}
|
||||
</span>
|
||||
|
|
@ -397,12 +398,12 @@ const RoomList: React.FC = () => {
|
|||
{(classSession.subject || classSession.description) && (
|
||||
<div className="flex flex-col gap-0.5">
|
||||
{classSession.subject && (
|
||||
<span className="text-xs font-medium text-indigo-600">
|
||||
<span className="text-xs font-medium text-indigo-600 dark:text-indigo-400">
|
||||
{classSession.subject}
|
||||
</span>
|
||||
)}
|
||||
{classSession.description && (
|
||||
<p className="text-xs text-gray-400 line-clamp-1">
|
||||
<p className="text-xs text-gray-400 dark:text-gray-500 line-clamp-1">
|
||||
{classSession.description}
|
||||
</p>
|
||||
)}
|
||||
|
|
@ -523,13 +524,13 @@ const RoomList: React.FC = () => {
|
|||
>
|
||||
<form
|
||||
onSubmit={showCreateModal ? handleCreateClass : handleEditClass}
|
||||
className="flex flex-col h-full"
|
||||
className="flex flex-col h-full p-0"
|
||||
>
|
||||
<Dialog.Body className="flex flex-col gap-2 overflow-hidden">
|
||||
<Dialog.Body className="flex flex-col gap-2 overflow-hidden bg-white dark:bg-gray-800">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3 border-b pb-3 flex-shrink-0">
|
||||
<div className="flex items-center gap-3 border-b pb-3 flex-shrink-0 border-gray-200 dark:border-gray-700">
|
||||
<FcVideoCall className="text-2xl" />
|
||||
<h5 className="font-bold">
|
||||
<h5 className="font-bold text-gray-900 dark:text-white">
|
||||
{showCreateModal
|
||||
? translate('::App.Videoroom.CreateRoom') || 'Yeni Oda Oluştur'
|
||||
: translate('::App.Videoroom.EditRoom') || 'Odayı Düzenle'}
|
||||
|
|
@ -538,7 +539,7 @@ const RoomList: React.FC = () => {
|
|||
|
||||
<div className="flex-1 overflow-y-auto p-1 space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
{translate('::App.Listform.ListformField.RoomName') || 'Room Name'} *
|
||||
</label>
|
||||
<input
|
||||
|
|
@ -547,7 +548,7 @@ const RoomList: React.FC = () => {
|
|||
autoFocus={showCreateModal}
|
||||
value={videoroom.name}
|
||||
onChange={(e) => setVideoroom({ ...videoroom, name: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder={
|
||||
translate('::App.Listform.ListformField.RoomNamePlaceholder') ||
|
||||
'Enter room name...'
|
||||
|
|
@ -556,14 +557,14 @@ const RoomList: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
{translate('::App.Listform.ListformField.Description') || 'Description'}
|
||||
</label>
|
||||
<textarea
|
||||
value={videoroom.description}
|
||||
onChange={(e) => setVideoroom({ ...videoroom, description: e.target.value })}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder={
|
||||
translate('::App.Listform.ListformField.DescriptionPlaceholder') ||
|
||||
'Ders hakkında kısa açıklama...'
|
||||
|
|
@ -573,14 +574,14 @@ const RoomList: React.FC = () => {
|
|||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
{translate('::App.Listform.ListformField.Subject') || 'Subject'}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={videoroom.subject}
|
||||
onChange={(e) => setVideoroom({ ...videoroom, subject: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder={
|
||||
translate('::App.Listform.ListformField.SubjectPlaceholder') ||
|
||||
'E.g. Math, Physics, Chemistry'
|
||||
|
|
@ -589,7 +590,7 @@ const RoomList: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
{translate('::App.Listform.ListformField.StartDateTime') ||
|
||||
'Start Date and Time'}{' '}
|
||||
*
|
||||
|
|
@ -608,14 +609,14 @@ const RoomList: React.FC = () => {
|
|||
scheduledStartTime: e.target.value,
|
||||
})
|
||||
}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
{translate('::App.Listform.ListformField.Duration') || 'Duration'} (
|
||||
{translate('::App.Listform.ListformField.Minutes') || 'minutes'})
|
||||
</label>
|
||||
|
|
@ -630,12 +631,12 @@ const RoomList: React.FC = () => {
|
|||
duration: parseInt(e.target.value),
|
||||
})
|
||||
}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
{translate('::App.Listform.ListformField.MaxParticipants') ||
|
||||
'Maximum Participants'}
|
||||
</label>
|
||||
|
|
@ -650,20 +651,20 @@ const RoomList: React.FC = () => {
|
|||
maxParticipants: parseInt(e.target.value),
|
||||
})
|
||||
}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sınıf Ayarları */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-2">
|
||||
<h3 className="text-lg font-semibold text-gray-800 dark:text-white mb-2">
|
||||
{translate('::App.Videoroom.RoomSettings') || 'Sınıf Ayarları'}
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-medium text-gray-700">
|
||||
<h4 className="font-medium text-gray-700 dark:text-gray-300">
|
||||
{translate('::App.Videoroom.ParticipantPermissions') ||
|
||||
'Katılımcı İzinleri'}
|
||||
</h4>{' '}
|
||||
|
|
@ -680,9 +681,9 @@ const RoomList: React.FC = () => {
|
|||
},
|
||||
})
|
||||
}
|
||||
className="rounded"
|
||||
className="rounded border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="text-sm">
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300">
|
||||
{translate('::App.Videoroom.AllowHandRaise') || 'Parmak kaldırma izni'}
|
||||
</span>
|
||||
</label>
|
||||
|
|
@ -699,9 +700,9 @@ const RoomList: React.FC = () => {
|
|||
},
|
||||
})
|
||||
}
|
||||
className="rounded"
|
||||
className="rounded border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="text-sm">
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300">
|
||||
{translate('::App.Videoroom.AllowStudentChat') || 'Öğrenci sohbet izni'}
|
||||
</span>
|
||||
</label>
|
||||
|
|
@ -718,9 +719,9 @@ const RoomList: React.FC = () => {
|
|||
},
|
||||
})
|
||||
}
|
||||
className="rounded"
|
||||
className="rounded border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="text-sm">
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300">
|
||||
{translate('::App.Videoroom.AllowPrivateMessages') || 'Özel mesaj izni'}
|
||||
</span>
|
||||
</label>
|
||||
|
|
@ -737,9 +738,9 @@ const RoomList: React.FC = () => {
|
|||
},
|
||||
})
|
||||
}
|
||||
className="rounded"
|
||||
className="rounded border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="text-sm">
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300">
|
||||
{translate('::App.Videoroom.AllowStudentScreenShare') ||
|
||||
'Öğrenci ekran paylaşımı'}
|
||||
</span>
|
||||
|
|
@ -747,12 +748,12 @@ const RoomList: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-medium text-gray-700">
|
||||
<h4 className="font-medium text-gray-700 dark:text-gray-300">
|
||||
{translate('::App.Videoroom.DefaultSettings') || 'Varsayılan Ayarlar'}
|
||||
</h4>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
{translate('::App.Videoroom.DefaultMicrophoneState') ||
|
||||
'Varsayılan mikrofon durumu'}
|
||||
</label>
|
||||
|
|
@ -767,7 +768,7 @@ const RoomList: React.FC = () => {
|
|||
},
|
||||
})
|
||||
}
|
||||
className="border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
>
|
||||
<option value="muted">
|
||||
{translate('::App.Videoroom.MicrophoneMuted') || 'Kapalı'}
|
||||
|
|
@ -779,7 +780,7 @@ const RoomList: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
{translate('::App.Videoroom.DefaultCameraState') ||
|
||||
'Varsayılan kamera durumu'}
|
||||
</label>
|
||||
|
|
@ -794,7 +795,7 @@ const RoomList: React.FC = () => {
|
|||
},
|
||||
})
|
||||
}
|
||||
className="border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
>
|
||||
<option value="on">
|
||||
{translate('::App.Videoroom.CameraOn') || 'Açık'}
|
||||
|
|
@ -806,7 +807,7 @@ const RoomList: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
{translate('::App.Videoroom.DefaultLayout') || 'Varsayılan layout'}
|
||||
</label>
|
||||
<select
|
||||
|
|
@ -820,7 +821,7 @@ const RoomList: React.FC = () => {
|
|||
},
|
||||
})
|
||||
}
|
||||
className="border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
>
|
||||
<option value="grid">
|
||||
{translate('::App.Videoroom.LayoutGridView') || 'Izgara Görünümü'}
|
||||
|
|
@ -850,9 +851,9 @@ const RoomList: React.FC = () => {
|
|||
},
|
||||
})
|
||||
}
|
||||
className="rounded"
|
||||
className="rounded border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="text-sm">
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300">
|
||||
{translate('::App.Videoroom.AutomaticallyMuteNewParticipants') ||
|
||||
'Yeni katılımcıları otomatik sustur'}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -289,6 +289,7 @@ const Login = () => {
|
|||
name="userName"
|
||||
placeholder={translate('::Abp.Account.EmailAddress')}
|
||||
component={Input}
|
||||
inputClassName="dark:bg-gray-900 dark:text-gray-100"
|
||||
/>
|
||||
</FormItem>
|
||||
)}
|
||||
|
|
@ -352,12 +353,12 @@ const Login = () => {
|
|||
<Button block loading={isSubmitting} variant="solid" type="submit">
|
||||
{isSubmitting ? 'Signing in...' : 'Sign In'}
|
||||
</Button>
|
||||
<div className="mt-4 text-center">
|
||||
{/* <div className="mt-4 text-center">
|
||||
<span>{translate('::Abp.Account.SignUp.Message')} </span>
|
||||
<ActionLink to={ROUTES_ENUM.authenticated.register}>
|
||||
{translate('::Abp.Account.Register')}
|
||||
</ActionLink>
|
||||
</div>
|
||||
</div> */}
|
||||
</FormContainer>
|
||||
</Form>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -620,21 +620,21 @@ function ComponentCodeLayout() {
|
|||
const mainContent = (
|
||||
<div className="flex-1 flex flex-col min-h-0 h-full">
|
||||
{/* Top Header */}
|
||||
<div className="bg-white border-b border-gray-200 px-3 py-3">
|
||||
<div className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 px-3 py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<h1 className="text-lg font-semibold text-gray-900">{name}</h1>
|
||||
<p className="text-xs text-gray-500">{dependencies.join(', ')}</p>
|
||||
<h1 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{name}</h1>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{dependencies.join(', ')}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
<button
|
||||
onClick={() => setShowPanelManager(true)}
|
||||
className="flex items-center space-x-2 px-3 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
className="flex items-center space-x-2 px-3 py-2 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
|
||||
title="Panel Manager"
|
||||
>
|
||||
<FaThLarge className="w-4 h-4 text-gray-600" />
|
||||
<span className="text-sm text-gray-600">Panels</span>
|
||||
<FaThLarge className="w-4 h-4 text-gray-600 dark:text-gray-300" />
|
||||
<span className="text-sm text-gray-600 dark:text-gray-300">Panels</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -657,7 +657,7 @@ function ComponentCodeLayout() {
|
|||
|
||||
return (
|
||||
<div
|
||||
className="flex h-screen bg-gray-50"
|
||||
className="flex h-screen bg-gray-50 dark:bg-gray-950"
|
||||
onDragOver={handleAppDragOver}
|
||||
onDrop={(e) => {
|
||||
e.preventDefault()
|
||||
|
|
|
|||
|
|
@ -189,9 +189,7 @@ export default ${pascalCaseName}Component;`
|
|||
<div className="h-screen flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<FaSync className="w-8 h-8 text-blue-500 animate-spin mx-auto mb-3" />
|
||||
<p className="text-slate-600">
|
||||
{translate('::App.Loading')}
|
||||
</p>
|
||||
<p className="text-slate-600">{translate('::App.Loading')}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -207,29 +205,21 @@ export default ${pascalCaseName}Component;`
|
|||
{({ values, touched, errors, isSubmitting, setFieldValue, submitForm, isValid }) => (
|
||||
<>
|
||||
{/* Enhanced Header */}
|
||||
<div className="bg-white shadow-lg border-b border-slate-200 sticky top-0 z-10">
|
||||
<div className="px-4 py-3">
|
||||
<div className="bg-white dark:bg-gray-900 shadow-lg border-b border-slate-200 dark:border-gray-700 sticky top-0 z-10">
|
||||
<div className="px-1 py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link
|
||||
to={ROUTES_ENUM.protected.saas.developerKit.components}
|
||||
className="flex items-center gap-2 text-slate-600 text-black px-4 py-2 rounded-lg hover:text-slate-700 transition-colors"
|
||||
>
|
||||
<FaArrowLeft className="w-3.5 h-3.5" />
|
||||
{translate('::App.DeveloperKit.ComponentEditor.Back')}
|
||||
</Link>
|
||||
<div className="h-6 w-px bg-slate-300"></div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="bg-gradient-to-r from-blue-500 to-purple-600 p-2 rounded-lg">
|
||||
<FaCode className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="font-semibold text-slate-800 text-sm leading-tight">
|
||||
<h1 className="font-semibold text-slate-800 dark:text-gray-100 text-sm leading-tight">
|
||||
{isEditing
|
||||
? `${translate('::App.DeveloperKit.ComponentEditor.Title.Edit')} - ${values.name || initialValues.name || 'Component'}`
|
||||
: translate('::App.DeveloperKit.ComponentEditor.Title.Create')}
|
||||
</h1>
|
||||
<p className="text-xs text-slate-500 leading-tight">
|
||||
<p className="text-xs text-slate-500 dark:text-gray-400 leading-tight">
|
||||
{isEditing ? 'Modify your React component' : 'Create a new React component'}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -238,11 +228,20 @@ export default ${pascalCaseName}Component;`
|
|||
|
||||
{/* Save Button in Header */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Link
|
||||
to={ROUTES_ENUM.protected.saas.developerKit.components}
|
||||
className="flex items-center gap-2 text-slate-600 dark:text-gray-300 text-black dark:text-white px-4 py-2 rounded-lg hover:text-slate-700 dark:hover:text-gray-100 transition-colors"
|
||||
>
|
||||
<FaArrowLeft className="w-3.5 h-3.5" />
|
||||
{translate('::App.DeveloperKit.ComponentEditor.Back')}
|
||||
</Link>
|
||||
<div className="h-6 w-px bg-slate-300 dark:bg-gray-700"></div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={submitForm}
|
||||
disabled={isSubmitting || !values.name.trim() || !isValid}
|
||||
className="flex items-center gap-2 bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
className="flex items-center gap-2 bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 dark:hover:bg-emerald-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<FaRegSave className="w-4 h-4" />
|
||||
{isSubmitting
|
||||
|
|
@ -255,14 +254,15 @@ export default ${pascalCaseName}Component;`
|
|||
</div>
|
||||
|
||||
<Form className="grid grid-cols-1 lg:grid-cols-3 gap-4 py-3">
|
||||
{/* Left Side - Component Settings */}
|
||||
<div className="space-y-3 col-span-1">
|
||||
<div className="bg-white rounded-lg shadow-sm border border-slate-200 p-3">
|
||||
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-sm border border-slate-200 dark:border-gray-700 p-3">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<div className="bg-blue-100 p-1.5 rounded-lg">
|
||||
<FaCog className="w-4 h-4 text-blue-600" />
|
||||
<div className="bg-blue-100 dark:bg-blue-900/20 p-1.5 rounded-lg">
|
||||
<FaCog className="w-4 h-4 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<h2 className="text-base font-semibold text-slate-900">Component Settings</h2>
|
||||
<h2 className="text-base font-semibold text-slate-900 dark:text-gray-100">
|
||||
Component Settings
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<FormContainer size="sm">
|
||||
|
|
@ -275,6 +275,7 @@ export default ${pascalCaseName}Component;`
|
|||
name="name"
|
||||
type="text"
|
||||
component={Input}
|
||||
autoFocus
|
||||
placeholder="e.g., Button, Card, Modal"
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newName = e.target.value
|
||||
|
|
@ -367,24 +368,27 @@ export default ${pascalCaseName}Component;`
|
|||
<div className="space-y-4 col-span-2">
|
||||
{/* Validation Errors */}
|
||||
{validationErrors.length > 0 && (
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-3 shadow-sm">
|
||||
<div className="bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-700 rounded-lg p-3 shadow-sm">
|
||||
<div className="flex items-start gap-2">
|
||||
<div className="bg-red-100 rounded-full p-1.5">
|
||||
<FaExclamationCircle className="w-4 h-4 text-red-600" />
|
||||
<div className="bg-red-100 dark:bg-red-900 rounded-full p-1.5">
|
||||
<FaExclamationCircle className="w-4 h-4 text-red-600 dark:text-red-400" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-base font-semibold text-red-800 mb-1">
|
||||
<h3 className="text-base font-semibold text-red-800 dark:text-red-300 mb-1">
|
||||
Validation Issues
|
||||
</h3>
|
||||
<p className="text-xs text-red-700 mb-3">
|
||||
<p className="text-xs text-red-700 dark:text-red-400 mb-3">
|
||||
{validationErrors.length} issue
|
||||
{validationErrors.length !== 1 ? 's' : ''} found in your code
|
||||
</p>
|
||||
<div className="space-y-1.5 max-h-32 overflow-y-auto">
|
||||
{validationErrors.slice(0, 5).map((error, index) => (
|
||||
<div key={index} className="bg-white p-2 rounded border border-red-100">
|
||||
<div className="text-xs text-red-800">
|
||||
<span className="font-medium bg-red-100 px-1.5 py-0.5 rounded text-xs">
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white dark:bg-gray-900 p-2 rounded border border-red-100 dark:border-red-700"
|
||||
>
|
||||
<div className="text-xs text-red-800 dark:text-red-300">
|
||||
<span className="font-medium bg-red-100 dark:bg-red-900 px-1.5 py-0.5 rounded text-xs">
|
||||
Line {error.startLineNumber}
|
||||
</span>
|
||||
<span className="ml-2">{error.message}</span>
|
||||
|
|
@ -392,7 +396,7 @@ export default ${pascalCaseName}Component;`
|
|||
</div>
|
||||
))}
|
||||
{validationErrors.length > 5 && (
|
||||
<div className="text-xs text-red-600 italic text-center py-1">
|
||||
<div className="text-xs text-red-600 dark:text-red-400 italic text-center py-1">
|
||||
... and {validationErrors.length - 5} more issue
|
||||
{validationErrors.length - 5 !== 1 ? 's' : ''}
|
||||
</div>
|
||||
|
|
@ -404,12 +408,14 @@ export default ${pascalCaseName}Component;`
|
|||
)}
|
||||
|
||||
{/* Component Preview */}
|
||||
<div className="bg-white rounded-lg shadow-sm border border-slate-200 p-3">
|
||||
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-sm border border-slate-200 dark:border-gray-700 p-3">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<div className="bg-purple-100 p-1.5 rounded-lg">
|
||||
<FaEye className="w-4 h-4 text-purple-600" />
|
||||
<div className="bg-purple-100 dark:bg-purple-900/20 p-1.5 rounded-lg">
|
||||
<FaEye className="w-4 h-4 text-purple-600 dark:text-purple-400" />
|
||||
</div>
|
||||
<h2 className="text-base font-semibold text-slate-900">Preview</h2>
|
||||
<h2 className="text-base font-semibold text-slate-900 dark:text-gray-100">
|
||||
Preview
|
||||
</h2>
|
||||
</div>
|
||||
<ComponentPreview componentName={values.name} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -107,15 +107,15 @@ const ComponentManager: React.FC = () => {
|
|||
placeholder={translate('::App.DeveloperKit.Component.SearchPlaceholder')}
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full pl-10 pr-4 py-2 border border-slate-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<FaFilter className="w-5 h-5 text-slate-500" />
|
||||
<FaFilter className="w-5 h-5 text-slate-500 dark:text-gray-400" />
|
||||
<select
|
||||
value={filterActive}
|
||||
onChange={(e) => setFilterActive(e.target.value as 'all' | 'active' | 'inactive')}
|
||||
className="px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="px-3 py-2 border border-slate-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
>
|
||||
<option value="all">{translate('::App.DeveloperKit.Component.Filter.All')}</option>
|
||||
<option value="active">
|
||||
|
|
@ -129,7 +129,7 @@ const ComponentManager: React.FC = () => {
|
|||
<div>
|
||||
<Link
|
||||
to={ROUTES_ENUM.protected.saas.developerKit.componentsNew}
|
||||
className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
|
||||
className="flex items-center gap-2 bg-blue-600 dark:bg-blue-700 text-white px-4 py-2 rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800 transition-colors"
|
||||
>
|
||||
<FaPlus className="w-4 h-4" />
|
||||
{translate('::App.DeveloperKit.Component.New')}
|
||||
|
|
@ -149,22 +149,22 @@ const ComponentManager: React.FC = () => {
|
|||
{filteredComponents.map((component) => (
|
||||
<div
|
||||
key={component.id}
|
||||
className="bg-white rounded-lg border border-slate-200 shadow-sm hover:shadow-md transition-shadow"
|
||||
className="bg-white dark:bg-gray-900 rounded-lg border border-slate-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-shadow"
|
||||
>
|
||||
<div className="p-6">
|
||||
<div className="flex items-start justify-between">
|
||||
{/* Sol taraf */}
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className="text-lg font-semibold text-slate-900">{component.name}</h3>
|
||||
<h3 className="text-lg font-semibold text-slate-900 dark:text-gray-100">{component.name}</h3>
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${
|
||||
component.isActive ? 'bg-green-500' : 'bg-slate-300'
|
||||
component.isActive ? 'bg-green-500' : 'bg-slate-300 dark:bg-gray-700'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="text-slate-600 text-sm mb-3">
|
||||
<p className="text-slate-600 dark:text-gray-300 text-sm mb-3">
|
||||
{(() => {
|
||||
try {
|
||||
const parsed = JSON.parse(component.dependencies ?? '[]')
|
||||
|
|
@ -178,13 +178,13 @@ const ComponentManager: React.FC = () => {
|
|||
</p>
|
||||
|
||||
{component.description && (
|
||||
<p className="text-slate-600 text-sm mb-3">{component.description}</p>
|
||||
<p className="text-slate-600 dark:text-gray-300 text-sm mb-3">{component.description}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Sağ taraf */}
|
||||
{component.lastModificationTime && (
|
||||
<div className="flex items-center gap-1 text-xs text-slate-500 ml-4 whitespace-nowrap">
|
||||
<div className="flex items-center gap-1 text-xs text-slate-500 dark:text-gray-400 ml-4 whitespace-nowrap">
|
||||
<FaCalendarAlt className="w-3 h-3" />
|
||||
<span>
|
||||
{new Date(component.lastModificationTime).toLocaleDateString() ?? ''}
|
||||
|
|
@ -196,24 +196,24 @@ const ComponentManager: React.FC = () => {
|
|||
{/* Props Preview */}
|
||||
{component.props && (
|
||||
<div className="mb-4">
|
||||
<p className="text-xs font-medium text-slate-700 mb-1">
|
||||
<p className="text-xs font-medium text-slate-700 dark:text-gray-400 mb-1">
|
||||
{translate('::App.DeveloperKit.Component.PropsLabel')}
|
||||
</p>
|
||||
<code className="text-xs bg-slate-100 text-slate-600 px-2 py-1 rounded">
|
||||
<code className="text-xs bg-slate-100 dark:bg-gray-800 text-slate-600 dark:text-gray-300 px-2 py-1 rounded">
|
||||
{component.props}
|
||||
</code>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center justify-between pt-2 border-t border-slate-100">
|
||||
<div className="flex items-center justify-between pt-2 border-t border-slate-100 dark:border-gray-700">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => handleToggleActive(component.id, !component.isActive)}
|
||||
className={`flex items-center gap-1 px-2 py-1 rounded text-xs font-medium transition-colors ${
|
||||
component.isActive
|
||||
? 'bg-green-100 text-green-700 hover:bg-green-200'
|
||||
: 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
||||
? 'bg-green-100 dark:bg-green-900/20 text-green-700 dark:text-green-400 hover:bg-green-200 dark:hover:bg-green-800'
|
||||
: 'bg-slate-100 dark:bg-gray-800 text-slate-600 dark:text-gray-400 hover:bg-slate-200 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
{component.isActive ? (
|
||||
|
|
@ -236,7 +236,7 @@ const ComponentManager: React.FC = () => {
|
|||
component.id,
|
||||
)}
|
||||
target="_blank"
|
||||
className="p-2 text-slate-600 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors"
|
||||
className="p-2 text-slate-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 rounded transition-colors"
|
||||
title={translate('::App.DeveloperKit.Component.Edit')}
|
||||
>
|
||||
<FaRegEdit className="w-4 h-4" />
|
||||
|
|
@ -246,14 +246,14 @@ const ComponentManager: React.FC = () => {
|
|||
':id',
|
||||
component.id,
|
||||
)}
|
||||
className="p-2 text-slate-600 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors"
|
||||
className="p-2 text-slate-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 rounded transition-colors"
|
||||
title={translate('::App.DeveloperKit.Component.View')}
|
||||
>
|
||||
<FaEye className="w-4 h-4" />
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => handleDelete(component.id, component.name)}
|
||||
className="p-2 text-slate-600 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
|
||||
className="p-2 text-slate-600 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900 rounded transition-colors"
|
||||
title={translate('::App.DeveloperKit.Component.Delete')}
|
||||
>
|
||||
<FaTrashAlt className="w-4 h-4" />
|
||||
|
|
|
|||
|
|
@ -317,7 +317,7 @@ const CrudEndpointManager: React.FC = () => {
|
|||
const selectedTableEndpoints = selectedTable ? getEndpointsForTable(selectedTable.tableName) : []
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full gap-4">
|
||||
<div className="flex flex-col h-full gap-4 bg-gray-50 dark:bg-gray-950">
|
||||
<Helmet
|
||||
titleTemplate={`%s | ${APP_NAME}`}
|
||||
title={translate('::' + 'App.DeveloperKit.CrudEndpoints')}
|
||||
|
|
@ -362,17 +362,17 @@ const CrudEndpointManager: React.FC = () => {
|
|||
|
||||
{/* Main two-panel layout */}
|
||||
<div
|
||||
className="flex flex-col gap-4 lg:flex-row"
|
||||
className="flex flex-col gap-4 lg:flex-row bg-gray-50 dark:bg-gray-950"
|
||||
style={{ minHeight: 400, height: 'calc(100vh - 250px)' }}
|
||||
>
|
||||
{/* Left Panel: Table List */}
|
||||
<div className="w-full lg:w-72 lg:flex-shrink-0 flex flex-col bg-white rounded-lg border border-slate-200 overflow-hidden h-[38vh] min-h-[260px] lg:h-auto lg:min-h-0">
|
||||
<div className="w-full lg:w-72 lg:flex-shrink-0 flex flex-col bg-white dark:bg-gray-900 rounded-lg border border-slate-200 dark:border-gray-700 overflow-hidden h-[38vh] min-h-[260px] lg:h-auto lg:min-h-0">
|
||||
{/* DataSource selector */}
|
||||
<div className="p-3 border-b border-slate-200 bg-slate-50">
|
||||
<div className="p-3 border-b border-slate-200 dark:border-gray-700 bg-slate-50 dark:bg-gray-800">
|
||||
<select
|
||||
value={selectedDataSource || ''}
|
||||
onChange={(e) => setSelectedDataSource(e.target.value)}
|
||||
className="w-full px-2 py-1.5 text-sm border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white"
|
||||
className="w-full px-2 py-1.5 text-sm border border-slate-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
|
||||
>
|
||||
{dataSources.map((ds) => (
|
||||
<option key={ds.id} value={ds.code ?? ''}>
|
||||
|
|
@ -384,7 +384,7 @@ const CrudEndpointManager: React.FC = () => {
|
|||
</div>
|
||||
|
||||
{/* Search + CRUD filter */}
|
||||
<div className="p-3 border-b border-slate-200 space-y-2">
|
||||
<div className="p-3 border-b border-slate-200 dark:border-gray-700 space-y-2">
|
||||
<div className="relative">
|
||||
<FaSearch className="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400 text-xs" />
|
||||
<input
|
||||
|
|
@ -392,10 +392,10 @@ const CrudEndpointManager: React.FC = () => {
|
|||
placeholder={translate('::App.DeveloperKit.CrudEndpoints.SearchTable')}
|
||||
value={tableSearch}
|
||||
onChange={(e) => setTableSearch(e.target.value)}
|
||||
className="w-full pl-7 pr-3 py-1.5 text-sm border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full pl-7 pr-3 py-1.5 text-sm border border-slate-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex rounded-lg border border-slate-200 overflow-hidden text-xs font-medium">
|
||||
<div className="flex rounded-lg border border-slate-200 dark:border-gray-700 overflow-hidden text-xs font-medium">
|
||||
{(['all', 'with', 'without'] as const).map((f) => {
|
||||
const labels = {
|
||||
all: `${translate('::App.DeveloperKit.CrudEndpoints.FilterAll')} (${dbTables.length})`,
|
||||
|
|
@ -414,7 +414,7 @@ const CrudEndpointManager: React.FC = () => {
|
|||
: f === 'without'
|
||||
? 'bg-slate-500 text-white'
|
||||
: 'bg-blue-500 text-white'
|
||||
: 'bg-white text-slate-500 hover:bg-slate-50'
|
||||
: 'bg-white dark:bg-gray-900 text-slate-500 dark:text-gray-400 hover:bg-slate-50 dark:hover:bg-gray-800'
|
||||
}`}
|
||||
>
|
||||
{labels[f]}
|
||||
|
|
@ -438,7 +438,7 @@ const CrudEndpointManager: React.FC = () => {
|
|||
) : (
|
||||
Object.entries(tablesBySchema).map(([schema, tables]) => (
|
||||
<div key={schema}>
|
||||
<div className="px-3 py-1.5 text-xs font-semibold text-slate-400 uppercase tracking-wide bg-slate-50 border-b border-slate-100 sticky top-0">
|
||||
<div className="px-3 py-1.5 text-xs font-semibold text-slate-400 dark:text-gray-400 uppercase tracking-wide bg-slate-50 dark:bg-gray-800 border-b border-slate-100 dark:border-gray-700 sticky top-0">
|
||||
{schema}
|
||||
</div>
|
||||
{tables.map((table) => {
|
||||
|
|
@ -450,8 +450,8 @@ const CrudEndpointManager: React.FC = () => {
|
|||
<button
|
||||
key={table.fullName}
|
||||
onClick={() => setSelectedTable(table)}
|
||||
className={`w-full flex items-center justify-between px-3 py-1 text-left hover:bg-slate-50 transition-colors border-b border-slate-50 ${
|
||||
isSelected ? 'bg-blue-50 border-l-2 border-l-blue-500' : ''
|
||||
className={`w-full flex items-center justify-between px-3 py-1 text-left hover:bg-slate-50 dark:hover:bg-gray-800 transition-colors border-b border-slate-50 dark:border-gray-800 ${
|
||||
isSelected ? 'bg-blue-50 dark:bg-blue-900/20 border-l-2 border-l-blue-500 dark:border-l-blue-400' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
|
|
@ -460,14 +460,14 @@ const CrudEndpointManager: React.FC = () => {
|
|||
hasEndpoints ? 'text-green-500' : 'text-slate-300'
|
||||
}`}
|
||||
/>
|
||||
<span className="text-sm text-slate-700 truncate">{table.tableName}</span>
|
||||
<span className="text-sm text-slate-700 dark:text-gray-100 truncate">{table.tableName}</span>
|
||||
</div>
|
||||
{hasEndpoints && (
|
||||
<span
|
||||
className={`flex-shrink-0 text-xs px-1.5 py-0.5 rounded-full font-medium ${
|
||||
active > 0
|
||||
? 'bg-green-100 text-green-700'
|
||||
: 'bg-slate-100 text-slate-500'
|
||||
? 'bg-green-100 dark:bg-green-900/20 text-green-700 dark:text-green-400'
|
||||
: 'bg-slate-100 dark:bg-gray-800 text-slate-500 dark:text-gray-400'
|
||||
}`}
|
||||
>
|
||||
{active}/{total}
|
||||
|
|
@ -486,33 +486,33 @@ const CrudEndpointManager: React.FC = () => {
|
|||
</div>
|
||||
|
||||
{/* Right Panel: Endpoint Management */}
|
||||
<div className="flex-1 min-w-0 flex flex-col bg-white rounded-lg border border-slate-200 overflow-hidden min-h-0">
|
||||
<div className="flex-1 min-w-0 flex flex-col bg-white dark:bg-gray-900 rounded-lg border border-slate-200 dark:border-gray-700 overflow-hidden min-h-0">
|
||||
{!selectedTable ? (
|
||||
<div className="flex-1 flex flex-col items-center justify-center text-slate-400 p-8">
|
||||
<FaDatabase className="text-4xl mb-3 text-slate-200" />
|
||||
<p className="text-base font-medium">{translate('::App.DeveloperKit.CrudEndpoints.SelectTablePrompt')}</p>
|
||||
<p className="text-sm mt-1">
|
||||
<div className="flex-1 flex flex-col items-center justify-center text-slate-400 dark:text-gray-500 p-8">
|
||||
<FaDatabase className="text-4xl mb-3 text-slate-200 dark:text-gray-700" />
|
||||
<p className="text-base font-medium dark:text-gray-300">{translate('::App.DeveloperKit.CrudEndpoints.SelectTablePrompt')}</p>
|
||||
<p className="text-sm mt-1 dark:text-gray-400">
|
||||
{translate('::App.DeveloperKit.CrudEndpoints.SelectTableDescription')}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col h-full overflow-hidden">
|
||||
{/* Table header */}
|
||||
<div className="flex flex-col gap-3 p-4 border-b border-slate-200 bg-slate-50 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="bg-blue-100 text-blue-600 p-2 rounded-lg">
|
||||
<FaTable />
|
||||
<div className="flex flex-col gap-3 p-4 border-b border-slate-200 dark:border-gray-700 bg-slate-50 dark:bg-gray-800 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="bg-blue-100 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 p-2 rounded-lg">
|
||||
<FaTable />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-slate-900 dark:text-gray-100">{selectedTable.schemaName}.{selectedTable.tableName}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-slate-900">{selectedTable.schemaName}.{selectedTable.tableName}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{selectedTableEndpoints.length > 0 && (
|
||||
<button
|
||||
onClick={() => handleDeleteAll(selectedTable)}
|
||||
disabled={deletingAll === selectedTable.fullName}
|
||||
className="flex items-center gap-2 px-3 py-1.5 text-sm text-red-600 border border-red-200 rounded-lg hover:bg-red-50 disabled:opacity-50 transition-colors"
|
||||
className="flex items-center gap-2 px-3 py-1.5 text-sm text-red-600 border border-red-200 dark:border-red-700 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{deletingAll === selectedTable.fullName ? (
|
||||
<FaSyncAlt className="animate-spin" />
|
||||
|
|
@ -525,7 +525,7 @@ const CrudEndpointManager: React.FC = () => {
|
|||
<button
|
||||
onClick={() => handleGenerate(selectedTable)}
|
||||
disabled={generatingFor === selectedTable.fullName}
|
||||
className="flex items-center gap-2 px-4 py-1.5 text-sm font-medium bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
|
||||
className="flex items-center gap-2 px-4 py-1.5 text-sm font-medium bg-blue-600 text-white rounded-lg hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{generatingFor === selectedTable.fullName ? (
|
||||
<FaSyncAlt className="animate-spin" />
|
||||
|
|
@ -542,10 +542,10 @@ const CrudEndpointManager: React.FC = () => {
|
|||
{/* Endpoints list */}
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
{selectedTableEndpoints.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-slate-400">
|
||||
<FaBolt className="text-3xl mb-3 text-slate-200" />
|
||||
<p className="font-medium">{translate('::App.DeveloperKit.CrudEndpoints.NoEndpointsYet')}</p>
|
||||
<p className="text-sm mt-1">
|
||||
<div className="flex flex-col items-center justify-center py-16 text-slate-400 dark:text-gray-500">
|
||||
<FaBolt className="text-3xl mb-3 text-slate-200 dark:text-gray-700" />
|
||||
<p className="font-medium dark:text-gray-300">{translate('::App.DeveloperKit.CrudEndpoints.NoEndpointsYet')}</p>
|
||||
<p className="text-sm mt-1 dark:text-gray-400">
|
||||
{translate('::App.DeveloperKit.CrudEndpoints.ClickToCreate')}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -557,10 +557,10 @@ const CrudEndpointManager: React.FC = () => {
|
|||
return (
|
||||
<div
|
||||
key={ep.id}
|
||||
className="border border-slate-200 rounded-lg overflow-hidden"
|
||||
className="border border-slate-200 dark:border-gray-700 rounded-lg overflow-hidden"
|
||||
>
|
||||
{/* Endpoint row */}
|
||||
<div className="flex items-center gap-3 p-3 bg-white hover:bg-slate-50 transition-colors">
|
||||
<div className="flex items-center gap-3 p-3 bg-white dark:bg-gray-900 hover:bg-slate-50 dark:hover:bg-gray-800 transition-colors">
|
||||
{/* Toggle */}
|
||||
<button
|
||||
onClick={() => handleToggle(ep.id)}
|
||||
|
|
@ -585,7 +585,7 @@ const CrudEndpointManager: React.FC = () => {
|
|||
<span
|
||||
className={`flex-shrink-0 px-2 py-0.5 text-xs font-bold rounded border ${
|
||||
METHOD_COLOR[ep.method] ||
|
||||
'bg-slate-100 text-slate-700 border-slate-200'
|
||||
'bg-slate-100 dark:bg-gray-800 text-slate-700 dark:text-gray-300 border-slate-200 dark:border-gray-700'
|
||||
}`}
|
||||
>
|
||||
{ep.method}
|
||||
|
|
@ -593,10 +593,10 @@ const CrudEndpointManager: React.FC = () => {
|
|||
|
||||
{/* Operation */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<span className="font-medium text-slate-800 text-sm">
|
||||
<span className="font-medium text-slate-800 dark:text-gray-100 text-sm">
|
||||
{ep.operationType}
|
||||
</span>
|
||||
<code className="ml-3 text-xs text-slate-500 bg-slate-100 px-2 py-0.5 rounded">
|
||||
<code className="ml-3 text-xs text-slate-500 dark:text-gray-400 bg-slate-100 dark:bg-gray-800 px-2 py-0.5 rounded">
|
||||
{ep.path}
|
||||
</code>
|
||||
</div>
|
||||
|
|
@ -604,7 +604,7 @@ const CrudEndpointManager: React.FC = () => {
|
|||
{/* Expand */}
|
||||
<button
|
||||
onClick={() => setExpandedEndpoint(isExpanded ? null : ep.id)}
|
||||
className="p-1.5 text-slate-400 hover:text-slate-700 transition-colors"
|
||||
className="p-1.5 text-slate-400 dark:text-gray-400 hover:text-slate-700 dark:hover:text-gray-200 transition-colors"
|
||||
title={translate('::App.DeveloperKit.CrudEndpoints.TestDetails')}
|
||||
>
|
||||
{isExpanded ? (
|
||||
|
|
@ -617,11 +617,11 @@ const CrudEndpointManager: React.FC = () => {
|
|||
|
||||
{/* Expanded detail + test */}
|
||||
{isExpanded && (
|
||||
<div className="border-t border-slate-200 bg-slate-50 p-4 space-y-4">
|
||||
<div className="border-t border-slate-200 dark:border-gray-700 bg-slate-50 dark:bg-gray-800 p-4 space-y-4">
|
||||
{/* Parameters */}
|
||||
{getEndpointParameters(ep).length > 0 && (
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-slate-600 mb-2">
|
||||
<p className="text-xs font-semibold text-slate-600 dark:text-gray-300 mb-2">
|
||||
{translate('::App.DeveloperKit.CrudEndpoints.Parameters')}
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
|
|
@ -650,7 +650,7 @@ const CrudEndpointManager: React.FC = () => {
|
|||
},
|
||||
}))
|
||||
}
|
||||
className="flex-1 px-2 py-1 text-xs border border-slate-300 rounded focus:ring-1 focus:ring-blue-500"
|
||||
className="flex-1 px-2 py-1 text-xs border border-slate-300 dark:border-gray-700 rounded focus:ring-1 focus:ring-blue-500 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -661,7 +661,7 @@ const CrudEndpointManager: React.FC = () => {
|
|||
{/* Request body */}
|
||||
{needsBody(ep) && (
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-slate-600 mb-2">
|
||||
<p className="text-xs font-semibold text-slate-600 dark:text-gray-300 mb-2">
|
||||
{translate('::App.DeveloperKit.CrudEndpoints.RequestBody')}
|
||||
</p>
|
||||
<textarea
|
||||
|
|
@ -673,7 +673,7 @@ const CrudEndpointManager: React.FC = () => {
|
|||
}))
|
||||
}
|
||||
rows={5}
|
||||
className="w-full px-2 py-1.5 text-xs border border-slate-300 rounded font-mono focus:ring-1 focus:ring-blue-500 bg-white"
|
||||
className="w-full px-2 py-1.5 text-xs border border-slate-300 dark:border-gray-700 rounded font-mono focus:ring-1 focus:ring-blue-500 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -713,25 +713,25 @@ const CrudEndpointManager: React.FC = () => {
|
|||
<div
|
||||
className={`rounded-lg border p-3 ${
|
||||
testResult.success
|
||||
? 'border-green-200 bg-green-50'
|
||||
: 'border-red-200 bg-red-50'
|
||||
? 'border-green-200 dark:border-green-700 bg-green-50 dark:bg-green-900/20'
|
||||
: 'border-red-200 dark:border-red-700 bg-red-50 dark:bg-red-900/20'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
{testResult.success ? (
|
||||
<FaCheckCircle className="text-green-500" />
|
||||
<FaCheckCircle className="text-green-500 dark:text-green-400" />
|
||||
) : (
|
||||
<FaExclamationCircle className="text-red-500" />
|
||||
<FaExclamationCircle className="text-red-500 dark:text-red-400" />
|
||||
)}
|
||||
<span className="text-sm font-medium">
|
||||
HTTP {testResult.status}
|
||||
</span>
|
||||
<span className="text-xs text-slate-500 ml-auto">
|
||||
<span className="text-xs text-slate-500 dark:text-gray-400 ml-auto">
|
||||
{new Date(testResult.timestamp).toLocaleTimeString()}
|
||||
</span>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<pre className="text-xs bg-white border border-slate-200 rounded p-2 overflow-x-auto max-h-48">
|
||||
<pre className="text-xs bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-700 rounded p-2 overflow-x-auto max-h-48 text-gray-900 dark:text-gray-100">
|
||||
{JSON.stringify(
|
||||
testResult.success ? testResult.data : testResult.error,
|
||||
null,
|
||||
|
|
@ -748,7 +748,7 @@ const CrudEndpointManager: React.FC = () => {
|
|||
),
|
||||
)
|
||||
}
|
||||
className="absolute top-1.5 right-1.5 p-1 text-slate-400 hover:text-slate-700"
|
||||
className="absolute top-1.5 right-1.5 p-1 text-slate-400 dark:text-gray-400 hover:text-slate-700 dark:hover:text-gray-200"
|
||||
>
|
||||
<FaCopy className="text-xs" />
|
||||
</button>
|
||||
|
|
@ -760,15 +760,15 @@ const CrudEndpointManager: React.FC = () => {
|
|||
{ep.csharpCode && (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<p className="text-xs font-semibold text-slate-600">{translate('::App.DeveloperKit.CrudEndpoints.CsharpCode')}</p>
|
||||
<p className="text-xs font-semibold text-slate-600 dark:text-gray-300">{translate('::App.DeveloperKit.CrudEndpoints.CsharpCode')}</p>
|
||||
<button
|
||||
onClick={() => navigator.clipboard.writeText(ep.csharpCode)}
|
||||
className="text-xs text-slate-400 hover:text-slate-700 flex items-center gap-1"
|
||||
className="text-xs text-slate-400 dark:text-gray-400 hover:text-slate-700 dark:hover:text-gray-200 flex items-center gap-1"
|
||||
>
|
||||
<FaCopy /> {translate('::App.DeveloperKit.CrudEndpoints.Copy')}
|
||||
</button>
|
||||
</div>
|
||||
<pre className="text-xs bg-slate-800 text-green-300 rounded-lg p-3 overflow-x-auto max-h-48 font-mono">
|
||||
<pre className="text-xs bg-slate-800 dark:bg-gray-900 text-green-300 rounded-lg p-3 overflow-x-auto max-h-48 font-mono">
|
||||
{ep.csharpCode}
|
||||
</pre>
|
||||
</div>
|
||||
|
|
@ -784,7 +784,7 @@ const CrudEndpointManager: React.FC = () => {
|
|||
|
||||
{/* Footer info */}
|
||||
{selectedTableEndpoints.length > 0 && (
|
||||
<div className="border-t border-slate-200 px-2 py-1 bg-slate-50 flex items-center gap-4 text-xs text-slate-500">
|
||||
<div className="border-t border-slate-200 dark:border-gray-700 px-2 py-1 bg-slate-50 dark:bg-gray-800 flex items-center gap-4 text-xs text-slate-500 dark:text-gray-400">
|
||||
<span className="flex items-center gap-1">
|
||||
<FaCheckCircle className="text-green-400" />
|
||||
{selectedTableEndpoints.filter((e) => e.isActive).length} {translate('::App.DeveloperKit.CrudEndpoints.ActiveCount')}
|
||||
|
|
|
|||
|
|
@ -121,7 +121,9 @@ const DynamicServiceEditor: React.FC = () => {
|
|||
} catch (error: any) {
|
||||
setCompileResult({
|
||||
success: false,
|
||||
errorMessage: error.response?.data?.message || translate('::App.DeveloperKit.DynamicServices.Editor.CompileError'),
|
||||
errorMessage:
|
||||
error.response?.data?.message ||
|
||||
translate('::App.DeveloperKit.DynamicServices.Editor.CompileError'),
|
||||
compilationTimeMs: 0,
|
||||
hasWarnings: false,
|
||||
errors: [],
|
||||
|
|
@ -163,7 +165,9 @@ const DynamicServiceEditor: React.FC = () => {
|
|||
} catch (error: any) {
|
||||
setPublishResult({
|
||||
success: false,
|
||||
errorMessage: error.response?.data?.message || translate('::App.DeveloperKit.DynamicServices.Editor.PublishError'),
|
||||
errorMessage:
|
||||
error.response?.data?.message ||
|
||||
translate('::App.DeveloperKit.DynamicServices.Editor.PublishError'),
|
||||
})
|
||||
} finally {
|
||||
setIsPublishing(false)
|
||||
|
|
@ -175,7 +179,9 @@ const DynamicServiceEditor: React.FC = () => {
|
|||
alert(translate('::App.DeveloperKit.DynamicServices.Editor.CodeCopied'))
|
||||
}
|
||||
|
||||
const pageTitle = id ? translate('::App.DeveloperKit.DynamicServices.Editor.EditTitle') : translate('::App.DeveloperKit.DynamicServices.Editor.NewTitle')
|
||||
const pageTitle = id
|
||||
? translate('::App.DeveloperKit.DynamicServices.Editor.EditTitle')
|
||||
: translate('::App.DeveloperKit.DynamicServices.Editor.NewTitle')
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
|
|
@ -192,34 +198,38 @@ const DynamicServiceEditor: React.FC = () => {
|
|||
<Helmet titleTemplate={`%s | ${APP_NAME}`} title={pageTitle} defaultTitle={APP_NAME} />
|
||||
|
||||
{/* Header */}
|
||||
<div className="bg-white shadow-lg border-b border-slate-200 sticky top-0 z-10">
|
||||
<div className="flex items-center justify-between px-4 py-3">
|
||||
<div className="bg-white dark:bg-gray-900 shadow-lg border-b border-slate-200 dark:border-gray-700 sticky top-0 z-10">
|
||||
<div className="flex items-center justify-between px-1 py-3">
|
||||
{/* Left: back + icon + title */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Link
|
||||
to={ROUTES_ENUM.protected.saas.developerKit.dynamicServices}
|
||||
className="flex items-center gap-2 text-slate-600 text-black px-4 py-2 rounded-lg hover:text-slate-700 transition-colors"
|
||||
>
|
||||
<FaArrowLeft className="w-3.5 h-3.5" />
|
||||
{translate('::App.DeveloperKit.DynamicServices.Editor.BackToServices')}
|
||||
</Link>
|
||||
<div className="h-6 w-px bg-slate-300"></div>
|
||||
<div className="flex items-center justify-center w-9 h-9 rounded-lg bg-gradient-to-r from-blue-500 to-purple-600 text-white shrink-0">
|
||||
<FaCode className="w-4 h-4" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="font-semibold text-slate-800 text-sm leading-tight">{pageTitle}</h1>
|
||||
<p className="text-xs text-slate-500 leading-tight">
|
||||
{id ? translate('::App.DeveloperKit.DynamicServices.Editor.EditSubtitle') : translate('::App.DeveloperKit.DynamicServices.Editor.NewSubtitle')}
|
||||
<h1 className="font-semibold text-slate-800 dark:text-gray-100 text-sm leading-tight">
|
||||
{pageTitle}
|
||||
</h1>
|
||||
<p className="text-xs text-slate-500 dark:text-gray-400 leading-tight">
|
||||
{id
|
||||
? translate('::App.DeveloperKit.DynamicServices.Editor.EditSubtitle')
|
||||
: translate('::App.DeveloperKit.DynamicServices.Editor.NewSubtitle')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: action buttons + swagger + publish */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
to={ROUTES_ENUM.protected.saas.developerKit.dynamicServices}
|
||||
className="flex items-center gap-2 text-slate-600 dark:text-gray-300 text-black dark:text-white px-4 py-2 rounded-lg hover:text-slate-700 dark:hover:text-gray-100 transition-colors"
|
||||
>
|
||||
<FaArrowLeft className="w-3.5 h-3.5" />
|
||||
{translate('::App.DeveloperKit.DynamicServices.Editor.BackToServices')}
|
||||
</Link>
|
||||
<div className="h-6 w-px bg-slate-300 dark:bg-gray-700"></div>
|
||||
<button
|
||||
onClick={copyCode}
|
||||
className="flex items-center gap-2 px-4 py-2 border border-slate-300 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors"
|
||||
className="flex items-center gap-2 px-4 py-2 border border-slate-300 dark:border-gray-700 rounded-lg text-slate-600 dark:text-gray-300 hover:bg-slate-50 dark:hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
<FaCopy className="w-3.5 h-3.5" />
|
||||
{translate('::App.DeveloperKit.DynamicServices.Editor.CopyCode')}
|
||||
|
|
@ -228,27 +238,31 @@ const DynamicServiceEditor: React.FC = () => {
|
|||
<button
|
||||
onClick={handleTestCompile}
|
||||
disabled={isCompiling || !code.trim()}
|
||||
className="flex items-center gap-2 bg-orange-500 text-white px-4 py-2 rounded-lg hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
className="flex items-center gap-2 bg-orange-500 text-white px-4 py-2 rounded-lg hover:bg-orange-600 dark:bg-orange-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{isCompiling ? (
|
||||
<FaSpinner className="w-3.5 h-3.5 animate-spin" />
|
||||
) : (
|
||||
<FaPlay className="w-3.5 h-3.5" />
|
||||
)}
|
||||
{isCompiling ? translate('::App.DeveloperKit.DynamicServices.Editor.Compiling') : translate('::App.DeveloperKit.DynamicServices.Editor.TestCompile')}
|
||||
{isCompiling
|
||||
? translate('::App.DeveloperKit.DynamicServices.Editor.Compiling')
|
||||
: translate('::App.DeveloperKit.DynamicServices.Editor.TestCompile')}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handlePublish}
|
||||
disabled={isPublishing}
|
||||
className="flex items-center gap-2 bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
className="flex items-center gap-2 bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 dark:bg-emerald-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{isPublishing ? (
|
||||
<FaSpinner className="w-3.5 h-3.5 animate-spin" />
|
||||
) : (
|
||||
<FaSave className="w-3.5 h-3.5" />
|
||||
)}
|
||||
{isPublishing ? translate('::App.DeveloperKit.DynamicServices.Editor.Publishing') : translate('::App.DeveloperKit.DynamicServices.Editor.Publish')}
|
||||
{isPublishing
|
||||
? translate('::App.DeveloperKit.DynamicServices.Editor.Publishing')
|
||||
: translate('::App.DeveloperKit.DynamicServices.Editor.Publish')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -259,8 +273,8 @@ const DynamicServiceEditor: React.FC = () => {
|
|||
<div
|
||||
className={`flex items-start gap-3 rounded-lg border px-4 py-3 text-sm ${
|
||||
compileResult.success
|
||||
? 'bg-emerald-50 border-emerald-200 text-emerald-800'
|
||||
: 'bg-red-50 border-red-200 text-red-800'
|
||||
? 'bg-emerald-50 dark:bg-emerald-900/20 border-emerald-200 dark:border-emerald-700 text-emerald-800 dark:text-emerald-300'
|
||||
: 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-700 text-red-800 dark:text-red-300'
|
||||
}`}
|
||||
>
|
||||
{compileResult.success ? (
|
||||
|
|
@ -270,13 +284,16 @@ const DynamicServiceEditor: React.FC = () => {
|
|||
)}
|
||||
<div className="flex-1">
|
||||
<span className="font-medium">
|
||||
{compileResult.success ? translate('::App.DeveloperKit.DynamicServices.Editor.CompileSuccess') : translate('::App.DeveloperKit.DynamicServices.Editor.CompileFailed')}
|
||||
{compileResult.success
|
||||
? translate('::App.DeveloperKit.DynamicServices.Editor.CompileSuccess')
|
||||
: translate('::App.DeveloperKit.DynamicServices.Editor.CompileFailed')}
|
||||
</span>
|
||||
{!compileResult.success && compileResult.errors && compileResult.errors.length > 0 && (
|
||||
<ul className="mt-1 space-y-0.5">
|
||||
{compileResult.errors.map((e, i) => (
|
||||
<li key={i} className="text-xs font-mono">
|
||||
[{e.code}] {translate('::App.DeveloperKit.DynamicServices.Editor.Line')} {e.line}: {e.message}
|
||||
[{e.code}] {translate('::App.DeveloperKit.DynamicServices.Editor.Line')}{' '}
|
||||
{e.line}: {e.message}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
|
@ -289,10 +306,12 @@ const DynamicServiceEditor: React.FC = () => {
|
|||
)}
|
||||
|
||||
{publishResult && !publishResult.success && (
|
||||
<div className="flex items-start gap-3 rounded-lg border bg-red-50 border-red-200 text-red-800 px-4 py-3 text-sm">
|
||||
<div className="flex items-start gap-3 rounded-lg border bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-700 text-red-800 dark:text-red-300 px-4 py-3 text-sm">
|
||||
<FaExclamationCircle className="w-4 h-4 mt-0.5 shrink-0 text-red-600" />
|
||||
<div>
|
||||
<span className="font-medium">{translate('::App.DeveloperKit.DynamicServices.Editor.PublishFailed')}</span>
|
||||
<span className="font-medium">
|
||||
{translate('::App.DeveloperKit.DynamicServices.Editor.PublishFailed')}
|
||||
</span>
|
||||
{publishResult.errorMessage && (
|
||||
<p className="text-xs mt-0.5">{publishResult.errorMessage}</p>
|
||||
)}
|
||||
|
|
@ -303,16 +322,20 @@ const DynamicServiceEditor: React.FC = () => {
|
|||
{/* Two-panel layout */}
|
||||
<div className="flex flex-col xl:flex-row gap-4 items-stretch xl:items-start">
|
||||
{/* LEFT PANEL — Servis Ayarları */}
|
||||
<div className="w-full xl:w-1/4 shrink-0 bg-white rounded-lg border border-slate-200 p-5 space-y-4">
|
||||
<div className="w-full xl:w-1/4 shrink-0 bg-white dark:bg-gray-900 rounded-lg border border-slate-200 dark:border-gray-700 p-5 space-y-4">
|
||||
{/* Panel header */}
|
||||
<div className="flex items-center gap-2 pb-3 border-b border-slate-100">
|
||||
<div className="flex items-center gap-2 pb-3 border-b border-slate-100 dark:border-gray-700">
|
||||
<FaCog className="w-4 h-4 text-blue-500" />
|
||||
<h2 className="font-semibold text-slate-700 text-sm">{translate('::App.DeveloperKit.DynamicServices.Editor.ServiceSettings')}</h2>
|
||||
<h2 className="font-semibold text-slate-700 dark:text-gray-100 text-sm">
|
||||
{translate('::App.DeveloperKit.DynamicServices.Editor.ServiceSettings')}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Servis Adı */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">{translate('::App.DeveloperKit.DynamicServices.Editor.ServiceName')}</label>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">
|
||||
{translate('::App.DeveloperKit.DynamicServices.Editor.ServiceName')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={serviceName}
|
||||
|
|
@ -320,53 +343,76 @@ const DynamicServiceEditor: React.FC = () => {
|
|||
setServiceName(e.target.value)
|
||||
setSubmitted(false)
|
||||
}}
|
||||
placeholder={translate('::App.DeveloperKit.DynamicServices.Editor.ServiceNamePlaceholder')}
|
||||
className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors ${
|
||||
serviceNameError ? 'border-red-500 bg-red-50' : 'border-slate-300'
|
||||
placeholder={translate(
|
||||
'::App.DeveloperKit.DynamicServices.Editor.ServiceNamePlaceholder',
|
||||
)}
|
||||
className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 ${
|
||||
serviceNameError
|
||||
? 'border-red-500 bg-red-50 dark:bg-red-900/20'
|
||||
: 'border-slate-300 dark:border-gray-700'
|
||||
}`}
|
||||
autoFocus
|
||||
/>
|
||||
{serviceNameError && <p className="text-red-500 text-xs mt-1">{translate('::App.DeveloperKit.DynamicServices.Editor.ServiceNameRequired')}</p>}
|
||||
{serviceNameError && (
|
||||
<p className="text-red-500 dark:text-red-400 text-xs mt-1">
|
||||
{translate('::App.DeveloperKit.DynamicServices.Editor.ServiceNameRequired')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Görünen Ad */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">{translate('::App.DeveloperKit.DynamicServices.Editor.DisplayName')}</label>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">
|
||||
{translate('::App.DeveloperKit.DynamicServices.Editor.DisplayName')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={displayName}
|
||||
onChange={(e) => setDisplayName(e.target.value)}
|
||||
placeholder={translate('::App.DeveloperKit.DynamicServices.Editor.DisplayNamePlaceholder')}
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder={translate(
|
||||
'::App.DeveloperKit.DynamicServices.Editor.DisplayNamePlaceholder',
|
||||
)}
|
||||
className="w-full px-3 py-2 border border-slate-300 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Açıklama */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">{translate('::App.DeveloperKit.DynamicServices.Editor.Description')}</label>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">
|
||||
{translate('::App.DeveloperKit.DynamicServices.Editor.Description')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder={translate('::App.DeveloperKit.DynamicServices.Editor.DescriptionPlaceholder')}
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder={translate(
|
||||
'::App.DeveloperKit.DynamicServices.Editor.DescriptionPlaceholder',
|
||||
)}
|
||||
className="w-full px-3 py-2 border border-slate-300 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Ana Entity Türü */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">{translate('::App.DeveloperKit.DynamicServices.Editor.PrimaryEntityType')}</label>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">
|
||||
{translate('::App.DeveloperKit.DynamicServices.Editor.PrimaryEntityType')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={primaryEntityType}
|
||||
onChange={(e) => setPrimaryEntityType(e.target.value)}
|
||||
placeholder={translate('::App.DeveloperKit.DynamicServices.Editor.PrimaryEntityTypePlaceholder')}
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder={translate(
|
||||
'::App.DeveloperKit.DynamicServices.Editor.PrimaryEntityTypePlaceholder',
|
||||
)}
|
||||
className="w-full px-3 py-2 border border-slate-300 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Aktif */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">{translate('::App.DeveloperKit.DynamicServices.Editor.IsActive')}</label>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">
|
||||
{translate('::App.DeveloperKit.DynamicServices.Editor.IsActive')}
|
||||
</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isActive}
|
||||
|
|
@ -380,15 +426,22 @@ const DynamicServiceEditor: React.FC = () => {
|
|||
<div className="w-full flex-1 min-w-0 space-y-4">
|
||||
{/* Monaco Editor */}
|
||||
<div className="bg-white rounded-lg border border-slate-200 overflow-hidden">
|
||||
<div className="px-5 py-3 bg-slate-50 border-b border-slate-200 flex items-center justify-between">
|
||||
<div className="px-5 py-3 bg-slate-50 dark:bg-gray-800 border-b border-slate-200 dark:border-gray-700 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<FaCode className="w-4 h-4 text-slate-500" />
|
||||
<h3 className="font-medium text-slate-700 text-sm">{translate('::App.DeveloperKit.DynamicServices.Editor.CodeEditor')}</h3>
|
||||
<FaCode className="w-4 h-4 text-slate-500 dark:text-gray-400" />
|
||||
<h3 className="font-medium text-slate-700 dark:text-gray-100 text-sm">
|
||||
{translate('::App.DeveloperKit.DynamicServices.Editor.CodeEditor')}
|
||||
</h3>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-slate-500">
|
||||
<span>{translate('::App.DeveloperKit.DynamicServices.Editor.LineCount')} {code.split('\n').length}</span>
|
||||
<div className="flex items-center gap-2 text-xs text-slate-500 dark:text-gray-400">
|
||||
<span>
|
||||
{translate('::App.DeveloperKit.DynamicServices.Editor.LineCount')}{' '}
|
||||
{code.split('\n').length}
|
||||
</span>
|
||||
<span className="text-slate-300">|</span>
|
||||
<span>{translate('::App.DeveloperKit.DynamicServices.Editor.CharCount')} {code.length}</span>
|
||||
<span>
|
||||
{translate('::App.DeveloperKit.DynamicServices.Editor.CharCount')} {code.length}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ height: '560px' }}>
|
||||
|
|
|
|||
|
|
@ -137,17 +137,17 @@ const DynamicServiceManager: React.FC = () => {
|
|||
placeholder={translate('::App.DeveloperKit.DynamicServices.SearchPlaceholder')}
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full pl-10 pr-4 py-2 border border-slate-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 w-full lg:w-auto">
|
||||
<FaFilter className="w-4 h-4 text-slate-500" />
|
||||
<FaFilter className="w-4 h-4 text-slate-500 dark:text-gray-400" />
|
||||
<select
|
||||
value={filterStatus}
|
||||
onChange={(e) =>
|
||||
setFilterStatus(e.target.value as 'all' | 'Success' | 'Failed' | 'Pending')
|
||||
}
|
||||
className="w-full lg:w-auto px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full lg:w-auto px-3 py-2 border border-slate-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
|
||||
>
|
||||
<option value="all">{translate('::App.DeveloperKit.DynamicServices.FilterAll')}</option>
|
||||
<option value="Success">{translate('::App.DeveloperKit.DynamicServices.Successful')}</option>
|
||||
|
|
@ -158,7 +158,7 @@ const DynamicServiceManager: React.FC = () => {
|
|||
<div className="w-full sm:w-auto">
|
||||
<Link
|
||||
to={ROUTES_ENUM.protected.saas.developerKit.dynamicServicesNew}
|
||||
className="w-full sm:w-auto justify-center flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
|
||||
className="w-full sm:w-auto justify-center flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 transition-colors"
|
||||
>
|
||||
<FaPlus className="w-4 h-4" />
|
||||
{translate('::App.DeveloperKit.DynamicServices.NewService')}
|
||||
|
|
@ -167,7 +167,7 @@ const DynamicServiceManager: React.FC = () => {
|
|||
<div className="w-full sm:w-auto">
|
||||
<button
|
||||
onClick={openSwagger}
|
||||
className="w-full sm:w-auto justify-center flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors"
|
||||
className="w-full sm:w-auto justify-center flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800 transition-colors"
|
||||
>
|
||||
<FaExternalLinkAlt className="w-3 h-3" />
|
||||
Swagger
|
||||
|
|
@ -185,35 +185,35 @@ const DynamicServiceManager: React.FC = () => {
|
|||
{filteredServices.map((service) => (
|
||||
<div
|
||||
key={service.id}
|
||||
className="bg-white rounded-lg border border-slate-200 shadow-sm hover:shadow-md transition-shadow"
|
||||
className="bg-white dark:bg-gray-900 rounded-lg border border-slate-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-shadow"
|
||||
>
|
||||
<div className="p-6">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className="text-base font-semibold text-slate-900">{service.name}</h3>
|
||||
<h3 className="text-base font-semibold text-slate-900 dark:text-gray-100">{service.name}</h3>
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${
|
||||
service.compilationStatus === 'Success'
|
||||
? 'bg-emerald-500'
|
||||
: 'bg-slate-300'
|
||||
: 'bg-slate-300 dark:bg-gray-700'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
{service.displayName && (
|
||||
<p className="text-slate-500 text-sm mb-1">{service.displayName}</p>
|
||||
<p className="text-slate-500 dark:text-gray-400 text-sm mb-1">{service.displayName}</p>
|
||||
)}
|
||||
<span
|
||||
className={`inline-block px-2 py-0.5 text-xs rounded-full font-medium mb-3 ${statusBadge(service.compilationStatus)}`}
|
||||
className={`inline-block px-2 py-0.5 text-xs rounded-full font-medium mb-3 ${statusBadge(service.compilationStatus)} dark:bg-opacity-80`}
|
||||
>
|
||||
{service.compilationStatus} · v{service.version}
|
||||
</span>
|
||||
{service.description && (
|
||||
<p className="text-slate-500 text-sm">{service.description}</p>
|
||||
<p className="text-slate-500 dark:text-gray-400 text-sm">{service.description}</p>
|
||||
)}
|
||||
</div>
|
||||
{service.lastSuccessfulCompilation && (
|
||||
<div className="flex items-center gap-1 text-xs text-slate-400 sm:ml-4 whitespace-nowrap">
|
||||
<div className="flex items-center gap-1 text-xs text-slate-400 dark:text-gray-400 sm:ml-4 whitespace-nowrap">
|
||||
<FaCalendarAlt className="w-3 h-3" />
|
||||
<span>
|
||||
{new Date(service.lastSuccessfulCompilation).toLocaleDateString()}
|
||||
|
|
@ -223,20 +223,20 @@ const DynamicServiceManager: React.FC = () => {
|
|||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center justify-end pt-3 border-t border-slate-100 gap-1 mt-4">
|
||||
<div className="flex items-center justify-end pt-3 border-t border-slate-100 dark:border-gray-700 gap-1 mt-4">
|
||||
<Link
|
||||
to={ROUTES_ENUM.protected.saas.developerKit.dynamicServicesEdit.replace(
|
||||
':id',
|
||||
service.id,
|
||||
)}
|
||||
className="p-2 text-slate-500 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors"
|
||||
className="p-2 text-slate-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-gray-800 rounded transition-colors"
|
||||
title={translate('::App.DeveloperKit.DynamicServices.EditTooltip')}
|
||||
>
|
||||
<FaRegEdit className="w-4 h-4" />
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => deleteService(service.id)}
|
||||
className="p-2 text-slate-500 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
|
||||
className="p-2 text-slate-500 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-gray-800 rounded transition-colors"
|
||||
title={translate('::App.DeveloperKit.DynamicServices.DeleteTooltip')}
|
||||
>
|
||||
<FaTrashAlt className="w-4 h-4" />
|
||||
|
|
@ -248,13 +248,13 @@ const DynamicServiceManager: React.FC = () => {
|
|||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<div className="bg-slate-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
|
||||
<FaCode className="w-8 h-8 text-slate-400" />
|
||||
<div className="bg-slate-100 dark:bg-gray-800 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
|
||||
<FaCode className="w-8 h-8 text-slate-400 dark:text-gray-500" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-slate-900 mb-2">
|
||||
<h3 className="text-lg font-medium text-slate-900 dark:text-gray-100 mb-2">
|
||||
{searchTerm || filterStatus !== 'all' ? translate('::App.DeveloperKit.DynamicServices.NoResults') : translate('::App.DeveloperKit.DynamicServices.NoServicesYet')}
|
||||
</h3>
|
||||
<p className="text-slate-500 mb-6">
|
||||
<p className="text-slate-500 dark:text-gray-400 mb-6">
|
||||
{searchTerm || filterStatus !== 'all'
|
||||
? translate('::App.DeveloperKit.DynamicServices.TryChangingFilter')
|
||||
: translate('::App.DeveloperKit.DynamicServices.GetStarted')}
|
||||
|
|
@ -262,7 +262,7 @@ const DynamicServiceManager: React.FC = () => {
|
|||
{!searchTerm && filterStatus === 'all' && (
|
||||
<Link
|
||||
to={ROUTES_ENUM.protected.saas.developerKit.dynamicServicesNew}
|
||||
className="inline-flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
|
||||
className="inline-flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 transition-colors"
|
||||
>
|
||||
<FaPlus className="w-4 h-4" />
|
||||
{translate('::App.DeveloperKit.DynamicServices.CreateNewService')}
|
||||
|
|
|
|||
|
|
@ -392,12 +392,12 @@ const SqlObjectExplorer = ({
|
|||
placeholder={translate('::App.Platform.Search')}
|
||||
value={filterText}
|
||||
onChange={(e) => setFilterText(e.target.value)}
|
||||
className="flex-1 px-3 py-1.5 text-sm border rounded-md bg-white dark:bg-gray-700 dark:border-gray-600"
|
||||
className="flex-1 px-3 py-1.5 text-sm border rounded-md bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100"
|
||||
/>
|
||||
<button
|
||||
onClick={loadObjects}
|
||||
disabled={loading || !dataSource}
|
||||
className="px-3 py-1.5 text-sm border rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50"
|
||||
className="px-3 py-1.5 text-sm border rounded-md border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
|
||||
title={translate('::App.Platform.Refresh')}
|
||||
>
|
||||
<FaSyncAlt className={loading ? 'animate-spin' : ''} />
|
||||
|
|
|
|||
|
|
@ -893,7 +893,7 @@ GO`,
|
|||
<div className="flex flex-wrap items-center gap-2 sm:gap-3">
|
||||
<FaDatabase className="text-lg text-blue-500" />
|
||||
<select
|
||||
className="border border-gray-300 rounded px-2 py-1 max-w-full"
|
||||
className="border border-gray-300 rounded px-2 py-1 max-w-full dark:bg-gray-700 dark:border-gray-600"
|
||||
disabled={state.selectedDataSource?.length === 0}
|
||||
value={state.selectedDataSource || ''}
|
||||
onChange={(e) => {
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ const SqlResultsGrid = ({ result }: SqlResultsGridProps) => {
|
|||
return (
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="flex items-center gap-2 mb-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded">
|
||||
<FaTimesCircle className="text-red-500 text-xl" />
|
||||
<FaTimesCircle className="text-red-500 dark:text-red-400 text-xl" />
|
||||
<div>
|
||||
<div className="font-semibold text-red-700 dark:text-red-400">
|
||||
{translate('::App.Platform.Error')}
|
||||
|
|
|
|||
|
|
@ -878,7 +878,7 @@ function SimpleMenuTreeSelect({
|
|||
return (
|
||||
<div
|
||||
className={`rounded-lg border ${
|
||||
invalid ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
|
||||
invalid ? 'border-red-500 dark:border-red-700' : 'border-gray-300 dark:border-gray-600'
|
||||
} bg-white dark:bg-gray-800 overflow-hidden`}
|
||||
>
|
||||
<div className="h-56 overflow-y-auto py-1">
|
||||
|
|
|
|||
|
|
@ -61,10 +61,10 @@ export function Forum() {
|
|||
|
||||
{error && (
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">
|
||||
<div className="bg-red-100 dark:bg-red-900 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-200 px-4 py-3 rounded relative">
|
||||
<strong className="font-bold">Error: </strong>
|
||||
<span className="block sm:inline">{error}</span>
|
||||
<Button onClick={clearError} className="absolute top-0 bottom-0 right-0 px-4 py-3">
|
||||
<Button onClick={clearError} className="absolute top-0 bottom-0 right-0 px-4 py-3 text-red-700 dark:text-red-200">
|
||||
<span className="sr-only">Dismiss</span>×
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -67,10 +67,10 @@ export function Management() {
|
|||
|
||||
{error && (
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">
|
||||
<div className="bg-red-100 dark:bg-red-900 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-200 px-4 py-3 rounded relative">
|
||||
<strong className="font-bold">Error: </strong>
|
||||
<span className="block sm:inline">{error}</span>
|
||||
<Button onClick={clearError} className="absolute top-0 bottom-0 right-0 px-4 py-3">
|
||||
<Button onClick={clearError} className="absolute top-0 bottom-0 right-0 px-4 py-3 text-red-700 dark:text-red-200">
|
||||
<span className="sr-only">Dismiss</span>×
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ export function AdminView({
|
|||
return (
|
||||
<div className="flex flex-col lg:flex-row gap-4 mt-3">
|
||||
{/* Sidebar Navigation */}
|
||||
<div className="lg:w-64 flex-shrink-0 p-4 bg-gray-50">
|
||||
<div className="lg:w-64 flex-shrink-0 p-4 bg-gray-50 dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
|
||||
<nav className="space-y-2">
|
||||
{navigationItems.map((item) => {
|
||||
const Icon = item.icon
|
||||
|
|
@ -116,9 +116,13 @@ export function AdminView({
|
|||
color="blue-500"
|
||||
active={isActive}
|
||||
onClick={() => setActiveSection(item.id)}
|
||||
className="w-full flex items-center space-x-3 px-4 py-3 text-left transition-colors"
|
||||
className={`w-full flex items-center space-x-3 px-4 py-3 text-left transition-colors
|
||||
${isActive
|
||||
? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300'
|
||||
: 'bg-transparent text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800'}
|
||||
`}
|
||||
>
|
||||
<Icon className="w-5 h-5" />
|
||||
<Icon className={`w-5 h-5 ${isActive ? 'text-blue-600 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400'}`} />
|
||||
<span className="font-medium">{item.label}</span>
|
||||
</Button>
|
||||
)
|
||||
|
|
@ -127,7 +131,7 @@ export function AdminView({
|
|||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1">
|
||||
<div className="flex-1 bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-4">
|
||||
{activeSection === 'stats' && (
|
||||
<AdminStats categories={categories} topics={topics} posts={posts} />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -163,7 +163,7 @@ export function CategoryManagement({
|
|||
<div className="space-y-3">
|
||||
{/* Create/Edit Form */}
|
||||
{showCreateForm && (
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">
|
||||
{editingCategory
|
||||
? translate('::App.Forum.CategoryManagement.EditCategory')
|
||||
|
|
@ -212,7 +212,7 @@ export function CategoryManagement({
|
|||
>
|
||||
<Field
|
||||
name="name"
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2"
|
||||
className="w-full border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
|
|
@ -224,7 +224,7 @@ export function CategoryManagement({
|
|||
>
|
||||
<Field
|
||||
name="slug"
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2"
|
||||
className="w-full border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
|
||||
/>
|
||||
</FormItem>
|
||||
</div>
|
||||
|
|
@ -237,7 +237,7 @@ export function CategoryManagement({
|
|||
>
|
||||
<Field
|
||||
name="description"
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2"
|
||||
className="w-full border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
|
||||
textArea="true"
|
||||
component={Input}
|
||||
/>
|
||||
|
|
@ -252,7 +252,7 @@ export function CategoryManagement({
|
|||
>
|
||||
<Field
|
||||
name="icon"
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2"
|
||||
className="w-full border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
|
||||
placeholder="💬"
|
||||
/>
|
||||
</FormItem>
|
||||
|
|
@ -265,7 +265,7 @@ export function CategoryManagement({
|
|||
>
|
||||
<Field
|
||||
name="displayOrder"
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2"
|
||||
className="w-full border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
|
||||
placeholder="💬"
|
||||
type="number"
|
||||
/>
|
||||
|
|
@ -306,9 +306,9 @@ export function CategoryManagement({
|
|||
)}
|
||||
|
||||
{/* Categories List */}
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
<div className="flex items-center justify-between px-3 py-4 border-b border-gray-200">
|
||||
<h3 className="text-lg font-semibold text-gray-900">
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||
<div className="flex items-center justify-between px-3 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
|
||||
{translate('::App.Forum.CategoryManagement.Categories')} ({categories.length})
|
||||
</h3>
|
||||
<Button
|
||||
|
|
@ -316,7 +316,7 @@ export function CategoryManagement({
|
|||
variant="solid"
|
||||
onClick={() => setShowCreateForm(true)}
|
||||
disabled={loading}
|
||||
className="flex items-center space-x-2 bg-blue-600 px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
|
||||
className="flex items-center space-x-2 bg-blue-600 dark:bg-blue-700 px-4 py-2 rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<FaPlus className="w-4 h-4" />
|
||||
<span>{translate('::App.Forum.CategoryManagement.AddCategory')}</span>
|
||||
|
|
@ -325,36 +325,36 @@ export function CategoryManagement({
|
|||
|
||||
{loading ? (
|
||||
<div className="p-8 text-center">
|
||||
<FaSpinner className="w-8 h-8 animate-spin mx-auto mb-4 text-blue-600" />
|
||||
<p className="text-gray-500">
|
||||
<FaSpinner className="w-8 h-8 animate-spin mx-auto mb-4 text-blue-600 dark:text-blue-400" />
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
{translate('::App.Forum.CategoryManagement.Loadingcategories')}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-gray-200">
|
||||
<div className="divide-y divide-gray-200 dark:divide-gray-800">
|
||||
{categories
|
||||
.sort((a, b) => a.displayOrder - b.displayOrder)
|
||||
.map((category) => (
|
||||
<div key={category.id} className="p-6 hover:bg-gray-50 transition-colors">
|
||||
<div key={category.id} className="p-6 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="text-2xl">{category.icon}</div>
|
||||
<div>
|
||||
<div className="flex items-center space-x-2 mb-1">
|
||||
<h4 className="text-lg font-semibold text-gray-900">{category.name}</h4>
|
||||
<h4 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{category.name}</h4>
|
||||
{!category.isActive && (
|
||||
<span className="px-2 py-1 bg-red-100 text-red-700 text-xs rounded-full">
|
||||
<span className="px-2 py-1 bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 text-xs rounded-full">
|
||||
Inactive
|
||||
</span>
|
||||
)}
|
||||
{category.isLocked && (
|
||||
<span className="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded-full">
|
||||
<span className="px-2 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300 text-xs rounded-full">
|
||||
Locked
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-gray-600 mb-2">{category.description}</p>
|
||||
<div className="flex items-center space-x-4 text-sm text-gray-500">
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-2">{category.description}</p>
|
||||
<div className="flex items-center space-x-4 text-sm text-gray-500 dark:text-gray-400">
|
||||
<span>{category.topicCount} topics</span>
|
||||
<span>{category.postCount} posts</span>
|
||||
<span>Order: {category.displayOrder}</span>
|
||||
|
|
@ -368,8 +368,8 @@ export function CategoryManagement({
|
|||
onClick={() => handleToggleActive(category)}
|
||||
className={`p-1 rounded-lg transition-colors ${
|
||||
category.isActive
|
||||
? 'text-green-600 hover:bg-green-100'
|
||||
: 'text-red-600 hover:bg-red-100'
|
||||
? 'text-green-600 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900'
|
||||
: 'text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900'
|
||||
}`}
|
||||
title={category.isActive ? 'Hide Category' : 'Show Category'}
|
||||
>
|
||||
|
|
@ -385,8 +385,8 @@ export function CategoryManagement({
|
|||
onClick={() => handleToggleLocked(category)}
|
||||
className={`p-1 rounded-lg transition-colors ${
|
||||
category.isLocked
|
||||
? 'text-yellow-600 hover:bg-yellow-100'
|
||||
: 'text-green-600 hover:bg-green-100'
|
||||
? 'text-yellow-600 dark:text-yellow-300 hover:bg-yellow-100 dark:hover:bg-yellow-900'
|
||||
: 'text-green-600 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900'
|
||||
}`}
|
||||
title={category.isLocked ? 'Unlock Category' : 'Lock Category'}
|
||||
>
|
||||
|
|
@ -400,7 +400,7 @@ export function CategoryManagement({
|
|||
<Button
|
||||
size="xs"
|
||||
onClick={() => handleEdit(category)}
|
||||
className="p-1 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors"
|
||||
className="p-1 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900 rounded-lg transition-colors"
|
||||
title={translate('::App.Forum.CategoryManagement.EditCategory')}
|
||||
>
|
||||
<FaEdit className="w-3 h-3" />
|
||||
|
|
@ -409,7 +409,7 @@ export function CategoryManagement({
|
|||
<Button
|
||||
size="xs"
|
||||
onClick={() => confirmDeleteCategory(category)}
|
||||
className="p-1 text-red-600 hover:bg-red-100 rounded-lg transition-colors"
|
||||
className="p-1 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900 rounded-lg transition-colors"
|
||||
title={translate('::App.Forum.CategoryManagement.DeleteCategory')}
|
||||
>
|
||||
<FaTrash className="w-3 h-3" />
|
||||
|
|
|
|||
|
|
@ -116,17 +116,17 @@ export function AdminStats({ categories, topics, posts }: AdminStatsProps) {
|
|||
</div>
|
||||
|
||||
{/* Recent Activity */}
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
||||
{translate('::App.Forum.Dashboard.RecentActivity')}
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
{latestActivities.map((activity, index) => (
|
||||
<div key={index} className="flex items-start space-x-3 p-3 bg-gray-50 rounded-lg">
|
||||
<div key={index} className="flex items-start space-x-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className={`w-2 h-2 ${activity.color} rounded-full mt-2`} />
|
||||
<div>
|
||||
<p className="text-sm text-gray-900">{activity.message}</p>
|
||||
<p className="text-xs text-gray-500">{dayjs(activity.date).fromNow()}</p>
|
||||
<p className="text-sm text-gray-900 dark:text-white">{activity.message}</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{dayjs(activity.date).fromNow()}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -162,7 +162,7 @@ export function PostManagement({
|
|||
<div className="space-y-3">
|
||||
{/* Create/Edit Form */}
|
||||
{showCreateForm && (
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">
|
||||
{editingPost
|
||||
? translate('::App.Forum.PostManagement.EditPost')
|
||||
|
|
@ -206,7 +206,7 @@ export function PostManagement({
|
|||
<Field
|
||||
as="select"
|
||||
name="topicId"
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2"
|
||||
className="w-full border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
|
||||
>
|
||||
<option value="">Select a topic</option>
|
||||
{topics.map((topic) => (
|
||||
|
|
@ -330,15 +330,15 @@ export function PostManagement({
|
|||
)}
|
||||
|
||||
{/* Posts List */}
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
<div className="flex items-center justify-between px-3 py-4 border-b border-gray-200">
|
||||
<h3 className="text-lg font-semibold text-gray-900">Posts ({posts.length})</h3>
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||
<div className="flex items-center justify-between px-3 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Posts ({posts.length})</h3>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="solid"
|
||||
onClick={() => setShowCreateForm(true)}
|
||||
disabled={loading}
|
||||
className="flex items-center space-x-2 bg-blue-600 px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
|
||||
className="flex items-center space-x-2 bg-blue-600 dark:bg-blue-700 px-4 py-2 rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<FaPlus className="w-4 h-4" />
|
||||
<span>{translate('::App.Forum.PostManagement.AddPost')}</span>
|
||||
|
|
@ -347,23 +347,23 @@ export function PostManagement({
|
|||
|
||||
{loading ? (
|
||||
<div className="p-8 text-center">
|
||||
<FaSpinner className="w-8 h-8 animate-spin mx-auto mb-4 text-blue-600" />
|
||||
<p className="text-gray-500">{translate('::App.Forum.PostManagement.Loadingtopics')}</p>
|
||||
<FaSpinner className="w-8 h-8 animate-spin mx-auto mb-4 text-blue-600 dark:text-blue-400" />
|
||||
<p className="text-gray-500 dark:text-gray-400">{translate('::App.Forum.PostManagement.Loadingtopics')}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-gray-200">
|
||||
<div className="divide-y divide-gray-200 dark:divide-gray-800">
|
||||
{posts
|
||||
.sort(
|
||||
(a, b) => new Date(b.creationTime).getTime() - new Date(a.creationTime).getTime(),
|
||||
)
|
||||
.map((post) => (
|
||||
<div key={post.id} className="p-6 hover:bg-gray-50 transition-colors">
|
||||
<div key={post.id} className="p-6 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center space-x-2 mb-2">
|
||||
<h4 className="text-sm font-semibold text-gray-900">{post.authorName}</h4>
|
||||
<h4 className="text-sm font-semibold text-gray-900 dark:text-gray-100">{post.authorName}</h4>
|
||||
{post.isAcceptedAnswer && (
|
||||
<div className="flex items-center space-x-1 bg-emerald-100 text-emerald-700 px-2 py-1 rounded-full text-xs">
|
||||
<div className="flex items-center space-x-1 bg-emerald-100 dark:bg-emerald-900 text-emerald-700 dark:text-emerald-300 px-2 py-1 rounded-full text-xs">
|
||||
<FaCheckCircle className="w-3 h-3" />
|
||||
<span>Accepted Answer</span>
|
||||
</div>
|
||||
|
|
@ -371,17 +371,17 @@ export function PostManagement({
|
|||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<p className="text-xs text-gray-500 mb-1">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mb-1">
|
||||
Reply to:{' '}
|
||||
<span className="font-medium">{getTopicTitle(post.topicId)}</span>
|
||||
</p>
|
||||
<p
|
||||
className="text-gray-700 line-clamp-3"
|
||||
className="text-gray-700 dark:text-gray-200 line-clamp-3"
|
||||
dangerouslySetInnerHTML={{ __html: post.content }}
|
||||
></p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-sm text-gray-500">
|
||||
<div className="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
|
||||
<div className="flex items-center space-x-4">
|
||||
<span>{formatDate(post.creationTime)}</span>
|
||||
<div className="flex items-center space-x-1">
|
||||
|
|
@ -398,8 +398,8 @@ export function PostManagement({
|
|||
onClick={() => handleToggleAcceptedAnswer(post)}
|
||||
className={`p-1 rounded-lg transition-colors ${
|
||||
post.isAcceptedAnswer
|
||||
? 'text-emerald-600 hover:bg-emerald-100'
|
||||
: 'text-gray-400 hover:bg-gray-100'
|
||||
? 'text-emerald-600 dark:text-emerald-400 hover:bg-emerald-100 dark:hover:bg-emerald-900'
|
||||
: 'text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800'
|
||||
}`}
|
||||
title={
|
||||
post.isAcceptedAnswer
|
||||
|
|
@ -417,7 +417,7 @@ export function PostManagement({
|
|||
<Button
|
||||
size="xs"
|
||||
onClick={() => handleEdit(post)}
|
||||
className="p-1 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors"
|
||||
className="p-1 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900 rounded-lg transition-colors"
|
||||
title={translate('::App.Forum.PostManagement.EditPost')}
|
||||
>
|
||||
<FaEdit className="w-3 h-3" />
|
||||
|
|
@ -426,7 +426,7 @@ export function PostManagement({
|
|||
<Button
|
||||
size="xs"
|
||||
onClick={() => confirmDeletePost(post)}
|
||||
className="p-1 text-red-600 hover:bg-red-100 rounded-lg transition-colors"
|
||||
className="p-1 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900 rounded-lg transition-colors"
|
||||
title={translate('::App.Forum.PostManagement.DeletePost')}
|
||||
>
|
||||
<FaTrashAlt className="w-3 h-3" />
|
||||
|
|
|
|||
|
|
@ -204,7 +204,7 @@ export function TopicManagement({
|
|||
<div className="space-y-3">
|
||||
{/* Create/Edit Form */}
|
||||
{showCreateForm && (
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">
|
||||
{editingTopic
|
||||
? translate('::App.Forum.TopicManagement.EditTopic')
|
||||
|
|
@ -253,7 +253,7 @@ export function TopicManagement({
|
|||
>
|
||||
<Field
|
||||
name="title"
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2"
|
||||
className="w-full border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
|
|
@ -266,7 +266,7 @@ export function TopicManagement({
|
|||
<Field
|
||||
as="select"
|
||||
name="categoryId"
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2"
|
||||
className="w-full border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
|
||||
>
|
||||
<option value="">Select a category</option>
|
||||
{categories.map((cat) => (
|
||||
|
|
@ -287,7 +287,7 @@ export function TopicManagement({
|
|||
as="textarea"
|
||||
name="content"
|
||||
rows={6}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2"
|
||||
className="w-full border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
|
|
@ -331,9 +331,9 @@ export function TopicManagement({
|
|||
)}
|
||||
|
||||
{/* Topics List */}
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
<div className="flex items-center justify-between px-3 py-4 border-b border-gray-200">
|
||||
<h3 className="text-lg font-semibold text-gray-900">
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||
<div className="flex items-center justify-between px-3 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
|
||||
{translate('::App.Forum.Dashboard.Topics')} ({topics.length})
|
||||
</h3>
|
||||
<Button
|
||||
|
|
@ -341,7 +341,7 @@ export function TopicManagement({
|
|||
variant="solid"
|
||||
onClick={() => setShowCreateForm(true)}
|
||||
disabled={loading}
|
||||
className="flex items-center space-x-2 bg-blue-600 px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
|
||||
className="flex items-center space-x-2 bg-blue-600 dark:bg-blue-700 px-4 py-2 rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<FaPlus className="w-4 h-4" />
|
||||
<span>{translate('::App.Forum.TopicManagement.AddTopic')}</span>
|
||||
|
|
@ -350,33 +350,33 @@ export function TopicManagement({
|
|||
|
||||
{loading ? (
|
||||
<div className="p-8 text-center">
|
||||
<FaSpinner className="w-8 h-8 animate-spin mx-auto mb-4 text-blue-600" />
|
||||
<p className="text-gray-500">
|
||||
<FaSpinner className="w-8 h-8 animate-spin mx-auto mb-4 text-blue-600 dark:text-blue-400" />
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
{translate('::App.Forum.TopicManagement.Loadingtopics')}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-gray-200">
|
||||
<div className="divide-y divide-gray-200 dark:divide-gray-800">
|
||||
{topics
|
||||
.sort(
|
||||
(a, b) => new Date(b.creationTime).getTime() - new Date(a.creationTime).getTime(),
|
||||
)
|
||||
.map((topic) => (
|
||||
<div key={topic.id} className="p-6 hover:bg-gray-50 transition-colors">
|
||||
<div key={topic.id} className="p-6 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center space-x-2 mb-2">
|
||||
{topic.isPinned && <FaThumbtack className="w-4 h-4 text-orange-500" />}
|
||||
{topic.isLocked && <FaLock className="w-4 h-4 text-gray-400" />}
|
||||
{topic.isSolved && <FaCheckCircle className="w-4 h-4 text-emerald-500" />}
|
||||
<h4 className="text-lg font-semibold text-gray-900 line-clamp-1">
|
||||
{topic.isPinned && <FaThumbtack className="w-4 h-4 text-orange-500 dark:text-orange-400" />}
|
||||
{topic.isLocked && <FaLock className="w-4 h-4 text-gray-400 dark:text-gray-500" />}
|
||||
{topic.isSolved && <FaCheckCircle className="w-4 h-4 text-emerald-500 dark:text-emerald-400" />}
|
||||
<h4 className="text-lg font-semibold text-gray-900 dark:text-gray-100 line-clamp-1">
|
||||
{topic.title}
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-600 mb-3 line-clamp-2">{topic.content}</p>
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-3 line-clamp-2">{topic.content}</p>
|
||||
|
||||
<div className="flex items-center justify-between text-sm text-gray-500">
|
||||
<div className="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="font-medium">{getCategoryName(topic.categoryId)}</span>
|
||||
<span>by {topic.authorName}</span>
|
||||
|
|
@ -399,8 +399,8 @@ export function TopicManagement({
|
|||
onClick={() => handlePin(topic)}
|
||||
className={`p-1 rounded-lg transition-colors ${
|
||||
topic.isPinned
|
||||
? 'text-orange-600 hover:bg-orange-100'
|
||||
: 'text-gray-400 hover:bg-gray-100'
|
||||
? 'text-orange-600 dark:text-orange-400 hover:bg-orange-100 dark:hover:bg-orange-900'
|
||||
: 'text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800'
|
||||
}`}
|
||||
title={topic.isPinned ? 'Unpin Topic' : 'Pin Topic'}
|
||||
>
|
||||
|
|
@ -416,8 +416,8 @@ export function TopicManagement({
|
|||
onClick={() => handleLock(topic)}
|
||||
className={`p-1 rounded-lg transition-colors ${
|
||||
topic.isLocked
|
||||
? 'text-yellow-600 hover:bg-yellow-100'
|
||||
: 'text-green-600 hover:bg-green-100'
|
||||
? 'text-yellow-600 dark:text-yellow-300 hover:bg-yellow-100 dark:hover:bg-yellow-900'
|
||||
: 'text-green-600 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900'
|
||||
}`}
|
||||
title={topic.isLocked ? 'Unlock Topic' : 'Lock Topic'}
|
||||
>
|
||||
|
|
@ -433,8 +433,8 @@ export function TopicManagement({
|
|||
onClick={() => handleSolved(topic)}
|
||||
className={`p-1 rounded-lg transition-colors ${
|
||||
topic.isSolved
|
||||
? 'text-emerald-600 hover:bg-emerald-100'
|
||||
: 'text-gray-400 hover:bg-gray-100'
|
||||
? 'text-emerald-600 dark:text-emerald-400 hover:bg-emerald-100 dark:hover:bg-emerald-900'
|
||||
: 'text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800'
|
||||
}`}
|
||||
title={topic.isSolved ? 'Mark as Unsolved' : 'Mark as Solved'}
|
||||
>
|
||||
|
|
@ -448,7 +448,7 @@ export function TopicManagement({
|
|||
<Button
|
||||
size="xs"
|
||||
onClick={() => handleEdit(topic)}
|
||||
className="p-1 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors"
|
||||
className="p-1 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900 rounded-lg transition-colors"
|
||||
title={translate('::App.Forum.TopicManagement.EditTopic')}
|
||||
>
|
||||
<FaEdit className="w-3 h-3" />
|
||||
|
|
@ -457,7 +457,7 @@ export function TopicManagement({
|
|||
<Button
|
||||
size="xs"
|
||||
onClick={() => confirmDeleteTopic(topic)}
|
||||
className="p-1 text-red-600 hover:bg-red-100 rounded-lg transition-colors"
|
||||
className="p-1 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900 rounded-lg transition-colors"
|
||||
title={translate('::App.Forum.TopicManagement.DeleteTopic')}
|
||||
>
|
||||
<FaTrashAlt className="w-3 h-3" />
|
||||
|
|
|
|||
|
|
@ -52,14 +52,14 @@ export function CreatePostModal({ onClose, onSubmit, parentPostId }: CreatePostM
|
|||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-white rounded-xl shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
||||
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
||||
<h3 className="text-lg font-semibold text-gray-900">
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
||||
<div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
{parentPostId
|
||||
? translate('::App.Forum.PostManagement.ReplytoTopic')
|
||||
: translate('::App.Forum.PostManagement.NewPost')}
|
||||
</h3>
|
||||
<button onClick={onClose} className="text-gray-400 hover:text-gray-600 transition-colors">
|
||||
<button onClick={onClose} className="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
|
||||
<FaTimes className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -38,12 +38,12 @@ export function CreateTopicModal({ onClose, onSubmit }: CreateTopicModalProps) {
|
|||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto p-6">
|
||||
<div className="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
{translate('::App.Forum.TopicManagement.NewTopic')}
|
||||
</h3>
|
||||
<button onClick={onClose} className="text-gray-400 hover:text-gray-600 transition-colors">
|
||||
<button onClick={onClose} className="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
|
||||
<FaTimes className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -68,7 +68,7 @@ export function CreateTopicModal({ onClose, onSubmit }: CreateTopicModalProps) {
|
|||
name="title"
|
||||
placeholder="Başlık girin..."
|
||||
autoFocus
|
||||
className="w-full text-sm border border-gray-300 rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full text-sm border border-gray-300 dark:border-gray-700 rounded-md px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
component={Input}
|
||||
/>
|
||||
</FormItem>
|
||||
|
|
@ -85,7 +85,7 @@ export function CreateTopicModal({ onClose, onSubmit }: CreateTopicModalProps) {
|
|||
{...field}
|
||||
rows={6}
|
||||
placeholder="Konu içeriğini yazın..."
|
||||
className="w-full text-sm border border-gray-300 rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
|
||||
className="w-full text-sm border border-gray-300 dark:border-gray-700 rounded-md px-3 py-2 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
|
|
|
|||
|
|
@ -24,20 +24,20 @@ export function ForumCategoryCard({ category, onClick }: CategoryCardProps) {
|
|||
return (
|
||||
<div
|
||||
onClick={onClick}
|
||||
className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md hover:border-blue-200 transition-all duration-200 cursor-pointer group"
|
||||
className="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 hover:shadow-md hover:border-blue-200 dark:hover:border-blue-500 transition-all duration-200 cursor-pointer group"
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start space-x-4 flex-1">
|
||||
<div className="text-3xl">{category.icon}</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center space-x-2 mb-1">
|
||||
<h3 className="text-lg font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
|
||||
{category.name}
|
||||
</h3>
|
||||
{category.isLocked && <FaLock className="w-4 h-4 text-gray-400" />}
|
||||
{category.isLocked && <FaLock className="w-4 h-4 text-gray-400 dark:text-gray-500" />}
|
||||
</div>
|
||||
<p className="text-gray-600 text-sm mb-3 line-clamp-2">{category.description}</p>
|
||||
<div className="flex items-center space-x-4 text-sm text-gray-500">
|
||||
<p className="text-gray-600 dark:text-gray-400 text-sm mb-3 line-clamp-2">{category.description}</p>
|
||||
<div className="flex items-center space-x-4 text-sm text-gray-500 dark:text-gray-400">
|
||||
<div className="flex items-center space-x-1">
|
||||
<FaComment className="w-4 h-4" />
|
||||
<span>{category.topicCount} topics</span>
|
||||
|
|
@ -49,9 +49,9 @@ export function ForumCategoryCard({ category, onClick }: CategoryCardProps) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right text-sm text-gray-500 ml-4">
|
||||
<div className="text-right text-sm text-gray-500 dark:text-gray-400 ml-4">
|
||||
<div>Last post</div>
|
||||
<div className="font-medium text-gray-700">{formatDate(category.lastPostDate)}</div>
|
||||
<div className="font-medium text-gray-700 dark:text-gray-200">{formatDate(category.lastPostDate)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ export function ForumPostCard({
|
|||
|
||||
return (
|
||||
<div
|
||||
className={`bg-white rounded-xl shadow-sm border border-gray-200 p-6 ${isFirst ? 'border-l-4 border-l-blue-500' : ''}`}
|
||||
className={`bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 ${isFirst ? 'border-l-4 border-l-blue-500 dark:border-l-blue-400' : ''}`}
|
||||
>
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="flex-shrink-0">
|
||||
|
|
@ -45,20 +45,20 @@ export function ForumPostCard({
|
|||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<h4 className="text-sm font-semibold text-gray-900">{post.authorName}</h4>
|
||||
<h4 className="text-sm font-semibold text-gray-900 dark:text-white">{post.authorName}</h4>
|
||||
{post.isAcceptedAnswer && (
|
||||
<div className="flex items-center space-x-1 bg-emerald-100 text-emerald-700 px-2 py-1 rounded-full text-xs">
|
||||
<div className="flex items-center space-x-1 bg-emerald-100 dark:bg-emerald-900 text-emerald-700 dark:text-emerald-200 px-2 py-1 rounded-full text-xs">
|
||||
<FaCheckCircle className="w-3 h-3" />
|
||||
<span>{translate('::App.Forum.PostManagement.AcceptedAnswer')}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-sm text-gray-500">{formatDate(post.creationTime)}</span>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">{formatDate(post.creationTime)}</span>
|
||||
</div>
|
||||
|
||||
<div className="prose prose-sm max-w-none mb-4">
|
||||
<p
|
||||
className="text-gray-700 whitespace-pre-wrap"
|
||||
className="text-gray-700 dark:text-gray-300 whitespace-pre-wrap"
|
||||
dangerouslySetInnerHTML={{ __html: post.content }}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -68,8 +68,8 @@ export function ForumPostCard({
|
|||
onClick={() => onLike(post.id, isFirst)}
|
||||
className={`flex items-center space-x-1 px-3 py-1 rounded-full text-sm transition-colors ${
|
||||
isLiked
|
||||
? 'bg-red-100 text-red-600 hover:bg-red-200'
|
||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
? 'bg-red-100 dark:bg-red-900 text-red-600 dark:text-red-200 hover:bg-red-200 dark:hover:bg-red-800'
|
||||
: 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
<FaHeart className={`w-4 h-4 ${isLiked ? 'fill-current' : ''}`} />
|
||||
|
|
@ -79,7 +79,7 @@ export function ForumPostCard({
|
|||
{!isFirst && (
|
||||
<button
|
||||
onClick={() => onReply(post.id)}
|
||||
className="flex items-center space-x-1 px-3 py-1 rounded-full text-sm bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors"
|
||||
className="flex items-center space-x-1 px-3 py-1 rounded-full text-sm bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
<FaReply className="w-4 h-4" />
|
||||
<span>{translate('::App.Forum.PostManagement.PostReply')}</span>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ export function ForumTopicCard({ topic, onClick }: TopicCardProps) {
|
|||
return (
|
||||
<div
|
||||
onClick={onClick}
|
||||
className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md hover:border-blue-200 transition-all duration-200 cursor-pointer group"
|
||||
className="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 hover:shadow-md hover:border-blue-200 dark:hover:border-blue-500 transition-all duration-200 cursor-pointer group"
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
{/* Sol taraf: Başlık, içerik, istatistik */}
|
||||
|
|
@ -36,14 +36,14 @@ export function ForumTopicCard({ topic, onClick }: TopicCardProps) {
|
|||
{topic.isPinned && <FaThumbtack className="w-4 h-4 text-orange-500" />}
|
||||
{topic.isLocked && <FaLock className="w-4 h-4 text-gray-400" />}
|
||||
{topic.isSolved && <FaCheckCircle className="w-4 h-4 text-emerald-500" />}
|
||||
<h3 className="text-lg font-semibold text-gray-900 group-hover:text-blue-600 transition-colors line-clamp-1">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors line-clamp-1">
|
||||
{topic.title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-600 text-sm mb-4 line-clamp-2">{topic.content}</p>
|
||||
<p className="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-2">{topic.content}</p>
|
||||
|
||||
<div className="flex items-center space-x-4 text-sm text-gray-500">
|
||||
<div className="flex items-center space-x-4 text-sm text-gray-500 dark:text-gray-400">
|
||||
<div className="flex items-center space-x-1" title={translate('::App.Platform.Views')}>
|
||||
<FaEye className="w-4 h-4" />
|
||||
<span>{topic.viewCount}</span>
|
||||
|
|
@ -70,17 +70,17 @@ export function ForumTopicCard({ topic, onClick }: TopicCardProps) {
|
|||
alt="User"
|
||||
className="w-10 h-10 rounded-full border"
|
||||
/>
|
||||
<div className="text-sm font-medium text-gray-700">{topic.authorName}</div>
|
||||
<div className="text-xs text-gray-500">{formatDate(topic.creationTime)}</div>
|
||||
<div className="text-sm font-medium text-gray-700 dark:text-gray-200">{topic.authorName}</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">{formatDate(topic.creationTime)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{topic.lastPostDate && topic.lastPostUserName && (
|
||||
<div className="mt-4 pt-4 border-t border-gray-100">
|
||||
<div className="flex items-center justify-between text-sm text-gray-500">
|
||||
<div className="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
|
||||
<div className="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
|
||||
<span>
|
||||
{translate('::App.Forum.TopicManagement.Lastreplyby')}{' '}
|
||||
<span className="font-medium text-gray-700">{topic.lastPostUserName}</span>
|
||||
<span className="font-medium text-gray-700 dark:text-gray-200">{topic.lastPostUserName}</span>
|
||||
{' '}
|
||||
<span>{formatDate(topic.lastPostDate)}</span>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -248,9 +248,9 @@ export function ForumView({
|
|||
onReply={handleReply}
|
||||
isLiked={likedPosts.has(post.id)}
|
||||
/>
|
||||
{post.children.length > 0 && (
|
||||
<div className="pl-6 border-gray-200 mt-4">{renderPosts(post.children)}</div>
|
||||
)}
|
||||
{post.children.length > 0 && (
|
||||
<div className="pl-6 border-gray-200 dark:border-gray-700 mt-4">{renderPosts(post.children)}</div>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
|
@ -294,7 +294,7 @@ export function ForumView({
|
|||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<FaSpinner className="w-8 h-8 animate-spin text-blue-600" />
|
||||
<span className="ml-2 text-gray-600">Loading forum data...</span>
|
||||
<span className="ml-2 text-gray-600 dark:text-gray-300">Loading forum data...</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -306,27 +306,27 @@ export function ForumView({
|
|||
<div className="flex items-center justify-between mb-4">
|
||||
{/* Left Side: Breadcrumb */}
|
||||
<div className="flex items-center space-x-2">
|
||||
{viewState !== 'categories' && <FaArrowLeft className="w-4 h-4" />}
|
||||
<nav className="flex items-center space-x-2 text-sm text-gray-500">
|
||||
{viewState !== 'categories' && <FaArrowLeft className="w-4 h-4 text-gray-700 dark:text-gray-200" />}
|
||||
<nav className="flex items-center space-x-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
{selectedCategory && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => handleBreadcrumbClick('forum')}
|
||||
className={`transition-colors ${
|
||||
viewState === 'categories'
|
||||
? 'text-gray-900 font-medium cursor-default'
|
||||
: 'hover:text-blue-600 cursor-pointer'
|
||||
? 'text-gray-900 dark:text-gray-100 font-medium cursor-default'
|
||||
: 'hover:text-blue-600 dark:hover:text-blue-400 cursor-pointer'
|
||||
}`}
|
||||
>
|
||||
<div className="text-sm font-medium text-gray-900">Forum</div>
|
||||
<div className="text-sm font-medium text-gray-900 dark:text-gray-100">Forum</div>
|
||||
</button>
|
||||
<span>/</span>
|
||||
<button
|
||||
onClick={() => handleBreadcrumbClick('category')}
|
||||
className={`transition-colors ${
|
||||
viewState === 'topics'
|
||||
? 'text-gray-900 font-medium cursor-default'
|
||||
: 'hover:text-blue-600 cursor-pointer'
|
||||
? 'text-gray-900 dark:text-gray-100 font-medium cursor-default'
|
||||
: 'hover:text-blue-600 dark:hover:text-blue-400 cursor-pointer'
|
||||
}`}
|
||||
>
|
||||
{selectedCategory.name}
|
||||
|
|
@ -336,7 +336,7 @@ export function ForumView({
|
|||
{selectedTopic && (
|
||||
<>
|
||||
<span>/</span>
|
||||
<span className="text-gray-900 font-medium">{selectedTopic.title}</span>
|
||||
<span className="text-gray-900 dark:text-gray-100 font-medium">{selectedTopic.title}</span>
|
||||
</>
|
||||
)}
|
||||
</nav>
|
||||
|
|
@ -350,7 +350,7 @@ export function ForumView({
|
|||
icon={<FaPlus className="w-4 h-4" />}
|
||||
variant="solid"
|
||||
onClick={() => setShowCreateTopic(true)}
|
||||
className="flex items-center space-x-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
|
||||
className="flex items-center space-x-2 bg-blue-600 dark:bg-blue-700 text-white px-4 py-2 rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800 transition-colors"
|
||||
>
|
||||
<span>{translate('::App.Forum.TopicManagement.NewTopic')}</span>
|
||||
</Button>
|
||||
|
|
@ -361,7 +361,7 @@ export function ForumView({
|
|||
icon={<FaPlus className="w-4 h-4" />}
|
||||
variant="solid"
|
||||
onClick={() => setShowCreatePost(true)}
|
||||
className="flex items-center space-x-2 bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 transition-colors"
|
||||
className="flex items-center space-x-2 bg-emerald-600 dark:bg-emerald-700 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 dark:hover:bg-emerald-800 transition-colors"
|
||||
>
|
||||
<span>{translate('::App.Forum.PostManagement.NewPost')}</span>
|
||||
</Button>
|
||||
|
|
@ -373,9 +373,9 @@ export function ForumView({
|
|||
icon={<FaSearch className="w-4 h-4" />}
|
||||
onClick={() => setIsSearchModalOpen(true)}
|
||||
variant="default"
|
||||
className="hidden md:flex items-center space-x-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
className="hidden md:flex items-center space-x-2 px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
<span className="text-gray-500">
|
||||
<span className="text-gray-500 dark:text-gray-300">
|
||||
{translate('::App.Forum.TopicManagement.Searchtopics')}
|
||||
</span>
|
||||
</Button>
|
||||
|
|
@ -385,7 +385,7 @@ export function ForumView({
|
|||
icon={<FaSearch className="w-5 h-5" />}
|
||||
onClick={() => setIsSearchModalOpen(true)}
|
||||
variant="default"
|
||||
className="md:hidden p-2 text-gray-400 hover:text-gray-600 transition-colors"
|
||||
className="md:hidden p-2 text-gray-400 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-100 transition-colors"
|
||||
></Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -97,21 +97,21 @@ export function SearchModal({
|
|||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-start justify-center pt-20 p-4 z-50">
|
||||
<div className="bg-white rounded-xl shadow-xl max-w-2xl w-full max-h-[70vh] overflow-hidden">
|
||||
<div className="flex items-center p-4 border-b border-gray-200">
|
||||
<FaSearch className="w-5 h-5 text-gray-400 mr-3" />
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl shadow-xl max-w-2xl w-full max-h-[70vh] overflow-hidden">
|
||||
<div className="flex items-center p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<FaSearch className="w-5 h-5 text-gray-400 dark:text-gray-500 mr-3" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Search categories, topics, and posts..."
|
||||
className="flex-1 outline-none text-lg"
|
||||
className="flex-1 outline-none text-lg bg-transparent text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500"
|
||||
autoFocus
|
||||
/>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-400 hover:text-gray-600 transition-colors ml-3"
|
||||
className="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors ml-3"
|
||||
>
|
||||
<FaTimes className="w-5 h-5" />
|
||||
</button>
|
||||
|
|
@ -119,12 +119,12 @@ export function SearchModal({
|
|||
|
||||
<div className="overflow-y-auto max-h-96">
|
||||
{!searchQuery.trim() ? (
|
||||
<div className="p-8 text-center text-gray-500">
|
||||
<FaSearch className="w-12 h-12 mx-auto mb-4 text-gray-300" />
|
||||
<div className="p-8 text-center text-gray-500 dark:text-gray-400">
|
||||
<FaSearch className="w-12 h-12 mx-auto mb-4 text-gray-300 dark:text-gray-600" />
|
||||
<p>Start typing to search categories, topics, and posts...</p>
|
||||
</div>
|
||||
) : !hasResults ? (
|
||||
<div className="p-8 text-center text-gray-500">
|
||||
<div className="p-8 text-center text-gray-500 dark:text-gray-400">
|
||||
<p>No results found for "{searchQuery}"</p>
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -132,7 +132,7 @@ export function SearchModal({
|
|||
{/* Categories */}
|
||||
{searchResults.categories.length > 0 && (
|
||||
<div>
|
||||
<div className="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wide bg-gray-50">
|
||||
<div className="px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide bg-gray-50 dark:bg-gray-800">
|
||||
Categories ({searchResults.categories.length})
|
||||
</div>
|
||||
{searchResults.categories.map((category, index) => (
|
||||
|
|
@ -142,24 +142,24 @@ export function SearchModal({
|
|||
onCategorySelect(category)
|
||||
onClose()
|
||||
}}
|
||||
className={`w-full flex items-center px-4 py-3 hover:bg-gray-50 transition-colors ${
|
||||
selectedIndex === index ? 'bg-blue-50 border-r-2 border-blue-500' : ''
|
||||
className={`w-full flex items-center px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors ${
|
||||
selectedIndex === index ? 'bg-blue-50 dark:bg-blue-900 border-r-2 border-blue-500 dark:border-blue-400' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center space-x-3 flex-1">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
|
||||
<FaFolder className="w-4 h-4 text-blue-600" />
|
||||
<div className="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
|
||||
<FaFolder className="w-4 h-4 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="font-medium text-gray-900">{category.name}</div>
|
||||
<div className="text-sm text-gray-500 line-clamp-1">
|
||||
<div className="font-medium text-gray-900 dark:text-white">{category.name}</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 line-clamp-1">
|
||||
{category.description}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">{category.topicCount} topics</div>
|
||||
<div className="text-xs text-gray-400 dark:text-gray-500">{category.topicCount} topics</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -168,7 +168,7 @@ export function SearchModal({
|
|||
{/* Topics */}
|
||||
{searchResults.topics.length > 0 && (
|
||||
<div>
|
||||
<div className="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wide bg-gray-50">
|
||||
<div className="px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide bg-gray-50 dark:bg-gray-800">
|
||||
Topics ({searchResults.topics.length})
|
||||
</div>
|
||||
{searchResults.topics.map((topic, index) => {
|
||||
|
|
@ -180,28 +180,28 @@ export function SearchModal({
|
|||
onTopicSelect(topic)
|
||||
onClose()
|
||||
}}
|
||||
className={`w-full flex items-center px-4 py-3 hover:bg-gray-50 transition-colors ${
|
||||
className={`w-full flex items-center px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors ${
|
||||
selectedIndex === globalIndex
|
||||
? 'bg-blue-50 border-r-2 border-blue-500'
|
||||
? 'bg-blue-50 dark:bg-blue-900 border-r-2 border-blue-500 dark:border-blue-400'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center space-x-3 flex-1">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-8 h-8 bg-emerald-100 rounded-lg flex items-center justify-center">
|
||||
<FaRegComment className="w-4 h-4 text-emerald-600" />
|
||||
<div className="w-8 h-8 bg-emerald-100 dark:bg-emerald-900 rounded-lg flex items-center justify-center">
|
||||
<FaRegComment className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="font-medium text-gray-900 line-clamp-1">
|
||||
<div className="font-medium text-gray-900 dark:text-white line-clamp-1">
|
||||
{topic.title}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||
by {topic.authorName} • {formatDate(topic.creationTime)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">{topic.replyCount} replies</div>
|
||||
<div className="text-xs text-gray-400 dark:text-gray-500">{topic.replyCount} replies</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
|
|
@ -211,7 +211,7 @@ export function SearchModal({
|
|||
{/* Posts */}
|
||||
{searchResults.posts.length > 0 && (
|
||||
<div>
|
||||
<div className="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wide bg-gray-50">
|
||||
<div className="px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide bg-gray-50 dark:bg-gray-800">
|
||||
Posts ({searchResults.posts.length})
|
||||
</div>
|
||||
{searchResults.posts.map((post, index) => {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useState, useRef } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import classNames from 'classnames'
|
||||
import EmojiPicker, { EmojiClickData } from 'emoji-picker-react'
|
||||
import EmojiPicker, { EmojiClickData, Theme } from 'emoji-picker-react'
|
||||
import { FaChartBar, FaSmile, FaTimes, FaImages, FaMapMarkerAlt } from 'react-icons/fa'
|
||||
import MediaManager from './MediaManager'
|
||||
import LocationPicker from './LocationPicker'
|
||||
|
|
@ -41,6 +41,7 @@ const CreatePost: React.FC<CreatePostProps> = ({ onCreatePost }) => {
|
|||
const textareaRef = useRef<HTMLTextAreaElement>(null)
|
||||
const emojiPickerRef = useRef<HTMLDivElement>(null)
|
||||
const { user, tenant } = useStoreState((state) => state.auth)
|
||||
const theme = useStoreState((state) => state.theme)
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
|
|
@ -445,8 +446,14 @@ const CreatePost: React.FC<CreatePostProps> = ({ onCreatePost }) => {
|
|||
|
||||
{/* Emoji Picker */}
|
||||
{showEmojiPicker && (
|
||||
<div ref={emojiPickerRef} className="absolute bottom-12 left-0 z-50">
|
||||
<EmojiPicker onEmojiClick={handleEmojiClick} autoFocusSearch={false} />
|
||||
<div ref={emojiPickerRef} className="absolute bottom-6 left-0 z-50 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-2">
|
||||
<EmojiPicker
|
||||
searchDisabled
|
||||
theme={theme.mode === 'dark' ? Theme.DARK : Theme.LIGHT}
|
||||
height={350}
|
||||
onEmojiClick={handleEmojiClick}
|
||||
autoFocusSearch={false}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -392,11 +392,11 @@ const LocationPicker: React.FC<LocationPickerProps> = ({ onSelect, onClose }) =>
|
|||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-between p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-750">
|
||||
<div className="flex items-center justify-between p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{selectedLocation ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<FaMapMarkerAlt className="w-4 h-4 text-blue-600" />
|
||||
<FaMapMarkerAlt className="w-4 h-4 text-blue-600 dark:text-blue-400" />
|
||||
<span className="font-medium text-gray-900 dark:text-gray-100">
|
||||
{selectedLocation.name}
|
||||
</span>
|
||||
|
|
@ -410,14 +410,14 @@ const LocationPicker: React.FC<LocationPickerProps> = ({ onSelect, onClose }) =>
|
|||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
||||
className="px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
||||
>
|
||||
{translate('::Cancel')}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleConfirm}
|
||||
disabled={!selectedLocation}
|
||||
className="px-6 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
|
||||
className="px-6 py-2 bg-blue-600 dark:bg-blue-700 text-white font-medium rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800 disabled:bg-gray-400 dark:disabled:bg-gray-700 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{translate('::ListForms.Wizard.Add')}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -16,17 +16,17 @@ const Surveys: React.FC<SurveysProps> = ({ surveys, onTakeSurvey }) => {
|
|||
const { translate } = useLocalization()
|
||||
|
||||
return (
|
||||
<div className="bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-850 rounded-xl shadow-lg border border-gray-200/50 dark:border-gray-700/50 overflow-hidden">
|
||||
<div className="bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900 rounded-xl shadow-lg border border-gray-200/50 dark:border-gray-700/50 overflow-hidden">
|
||||
{/* Header with gradient */}
|
||||
|
||||
<div className="p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="p-4 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
|
||||
<h2 className="text-base font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<FaClipboardCheck className="w-5 h-5" />
|
||||
{translate('::App.Platform.Intranet.Widgets.ActiveSurveys.Title')}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="p-3 space-y-4">
|
||||
<div className="p-3 space-y-4 bg-white dark:bg-gray-800">
|
||||
{surveys?.map((survey, index) => {
|
||||
const daysLeft = dayjs(survey.deadline).diff(dayjs(), 'day')
|
||||
const urgency = daysLeft <= 3 ? 'urgent' : daysLeft <= 7 ? 'warning' : 'normal'
|
||||
|
|
@ -38,15 +38,15 @@ const Surveys: React.FC<SurveysProps> = ({ surveys, onTakeSurvey }) => {
|
|||
onClick={() => onTakeSurvey(survey)}
|
||||
className={`group relative p-5 rounded-xl border cursor-pointer transition-all duration-300 hover:shadow-lg hover:-translate-y-1 ${
|
||||
isCompleted
|
||||
? 'bg-green-50 dark:bg-green-900/20 border-green-300 dark:border-green-700 hover:border-green-400 dark:hover:border-green-500'
|
||||
: 'bg-white dark:bg-gray-750 border-gray-200 dark:border-gray-600 hover:border-purple-300 dark:hover:border-purple-500'
|
||||
? 'bg-green-50 dark:bg-green-900/30 border-green-300 dark:border-green-700 hover:border-green-400 dark:hover:border-green-500'
|
||||
: 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-500'
|
||||
}`}
|
||||
>
|
||||
{/* Background gradient on hover */}
|
||||
<div className={`absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 ${
|
||||
<div className={`absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none ${
|
||||
isCompleted
|
||||
? 'bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/10 dark:to-emerald-900/10'
|
||||
: 'bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/10 dark:to-pink-900/10'
|
||||
? 'bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20'
|
||||
: 'bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20'
|
||||
}`}></div>
|
||||
|
||||
<div className="relative">
|
||||
|
|
@ -71,10 +71,10 @@ const Surveys: React.FC<SurveysProps> = ({ surveys, onTakeSurvey }) => {
|
|||
<div
|
||||
className={`px-2 py-1 text-center rounded-full text-xs font-medium ${
|
||||
urgency === 'urgent'
|
||||
? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'
|
||||
? 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'
|
||||
: urgency === 'warning'
|
||||
? 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300'
|
||||
: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300'
|
||||
? 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300'
|
||||
: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'
|
||||
}`}
|
||||
>
|
||||
{daysLeft > 0 ? translate('::App.Platform.Intranet.Widgets.ActiveSurveys.DaysLeft', { count: daysLeft }) : translate('::App.Platform.Intranet.Widgets.ActiveSurveys.LastDay')}
|
||||
|
|
@ -84,8 +84,8 @@ const Surveys: React.FC<SurveysProps> = ({ surveys, onTakeSurvey }) => {
|
|||
{/* Survey Stats */}
|
||||
<div className="grid grid-cols-3 gap-4 mb-4">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<div className="p-1.5 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
|
||||
<FaQuestionCircle className="w-3 h-3 text-blue-600 dark:text-blue-400" />
|
||||
<div className="p-1.5 bg-blue-100 dark:bg-blue-900/40 rounded-lg">
|
||||
<FaQuestionCircle className="w-3 h-3 text-blue-600 dark:text-blue-300" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{translate('::App.Platform.Intranet.Widgets.ActiveSurveys.Questions')}</p>
|
||||
|
|
@ -96,8 +96,8 @@ const Surveys: React.FC<SurveysProps> = ({ surveys, onTakeSurvey }) => {
|
|||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<div className="p-1.5 bg-green-100 dark:bg-green-900/30 rounded-lg">
|
||||
<FaUsers className="w-3 h-3 text-green-600 dark:text-green-400" />
|
||||
<div className="p-1.5 bg-green-100 dark:bg-green-900/40 rounded-lg">
|
||||
<FaUsers className="w-3 h-3 text-green-600 dark:text-green-300" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{translate('::App.Platform.Intranet.Widgets.ActiveSurveys.Responses')}</p>
|
||||
|
|
@ -108,8 +108,8 @@ const Surveys: React.FC<SurveysProps> = ({ surveys, onTakeSurvey }) => {
|
|||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<div className="p-1.5 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
|
||||
<FaClock className="w-3 h-3 text-purple-600 dark:text-purple-400" />
|
||||
<div className="p-1.5 bg-purple-100 dark:bg-purple-900/40 rounded-lg">
|
||||
<FaClock className="w-3 h-3 text-purple-600 dark:text-purple-300" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{translate('::App.Platform.Intranet.Widgets.ActiveSurveys.Duration')}</p>
|
||||
|
|
@ -122,13 +122,13 @@ const Surveys: React.FC<SurveysProps> = ({ surveys, onTakeSurvey }) => {
|
|||
<div className="mb-4">
|
||||
<div className="flex justify-between text-xs mb-1">
|
||||
<span className="text-gray-600 dark:text-gray-400">{translate('::App.Platform.Intranet.Widgets.ActiveSurveys.CompletionRate')}</span>
|
||||
<span className="text-gray-800 dark:text-gray-200 font-medium">
|
||||
<span className="text-gray-800 dark:text-gray-100 font-medium">
|
||||
{Math.round((survey.responses / 100) * 100)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2">
|
||||
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||||
<div
|
||||
className="bg-gradient-to-r from-purple-500 to-pink-500 h-2 rounded-full transition-all duration-500"
|
||||
className="bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-700 h-2 rounded-full transition-all duration-500"
|
||||
style={{ width: `${Math.min((survey.responses / 100) * 100, 100)}%` }}
|
||||
></div>
|
||||
</div>
|
||||
|
|
@ -136,15 +136,15 @@ const Surveys: React.FC<SurveysProps> = ({ surveys, onTakeSurvey }) => {
|
|||
|
||||
{/* Deadline */}
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
<FaClock className="inline w-3 h-3 mr-1" />
|
||||
<FaClock className="inline w-3 h-3 mr-1 text-purple-500 dark:text-purple-300" />
|
||||
{currentLocalDate(survey.deadline, currentLocale || 'tr')}
|
||||
</p>
|
||||
|
||||
{/* Action Button */}
|
||||
<button className={`w-full flex items-center justify-center gap-2 px-4 py-3 text-white text-sm font-medium rounded-lg transition-all duration-300 transform group-hover:scale-[1.02] shadow-sm hover:shadow-md ${
|
||||
<button className={`w-full flex items-center justify-center gap-2 px-4 py-3 text-white text-sm font-medium rounded-lg transition-all duration-300 transform group-hover:scale-[1.02] shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-purple-400 ${
|
||||
isCompleted
|
||||
? 'bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600'
|
||||
: 'bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700'
|
||||
? 'bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 dark:from-green-600 dark:to-emerald-600 dark:hover:from-green-700 dark:hover:to-emerald-700'
|
||||
: 'bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 dark:from-purple-700 dark:to-pink-700 dark:hover:from-purple-800 dark:hover:to-pink-800'
|
||||
}`}>
|
||||
{isCompleted
|
||||
? translate('::App.Platform.Intranet.Widgets.ActiveSurveys.ViewResponses')
|
||||
|
|
@ -157,9 +157,9 @@ const Surveys: React.FC<SurveysProps> = ({ surveys, onTakeSurvey }) => {
|
|||
})}
|
||||
|
||||
{surveys?.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<div className="text-center py-12 bg-white dark:bg-gray-800 rounded-xl">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full mb-4">
|
||||
<FaClipboardCheck className="w-8 h-8 text-gray-400" />
|
||||
<FaClipboardCheck className="w-8 h-8 text-gray-400 dark:text-gray-500" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
|
||||
{translate('::App.Platform.Intranet.Widgets.ActiveSurveys.NoActive')}
|
||||
|
|
|
|||
|
|
@ -140,30 +140,30 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
|
|||
style={style}
|
||||
className={`
|
||||
flex items-center gap-1 p-1 rounded-lg transition-all duration-200 group min-h-[30px]
|
||||
${isDesignMode ? 'cursor-move hover:bg-blue-50 border border-transparent hover:border-blue-200' : 'cursor-pointer hover:bg-gray-50'}
|
||||
${isDragOverlay ? 'shadow-lg bg-white border border-blue-300 z-50' : ''}
|
||||
${isDesignMode ? 'cursor-move hover:bg-blue-50 dark:hover:bg-blue-900 border border-transparent hover:border-blue-200 dark:hover:border-blue-400' : 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800'}
|
||||
${isDragOverlay ? 'shadow-lg bg-white dark:bg-gray-800 border border-blue-300 dark:border-blue-500 z-50' : ''}
|
||||
${isDragging ? 'opacity-50' : ''}
|
||||
${item.children && item.children.length > 0 ? 'bg-blue-50' : depth === 0 ? 'bg-white' : 'bg-gray-50'}
|
||||
${item.children && item.children.length > 0 ? 'bg-blue-50 dark:bg-blue-900' : depth === 0 ? 'bg-white dark:bg-gray-800' : 'bg-gray-50 dark:bg-gray-900'}
|
||||
`}
|
||||
{...(isDesignMode ? { ...attributes, ...listeners } : { onClick: toggleExpanded })}
|
||||
>
|
||||
{isDesignMode && (
|
||||
<div className="flex gap-2 items-center mr-2">
|
||||
<button onClick={openCreateModal} title="New Item">
|
||||
<FaPlus size={16} className="text-green-600 hover:text-green-800" />
|
||||
<FaPlus size={16} className="text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300" />
|
||||
</button>
|
||||
<button onClick={handleDelete} title="Delete Item">
|
||||
<FaTrashAlt size={16} className="text-red-600 hover:text-red-800" />
|
||||
<FaTrashAlt size={16} className="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-3 flex-1 min-w-0">
|
||||
<div className="flex-shrink-0 text-gray-600 text-xl">
|
||||
<div className="flex-shrink-0 text-gray-600 dark:text-gray-300 text-xl">
|
||||
{navigationIcon[item.icon || ''] ? (
|
||||
React.createElement(navigationIcon[item.icon || ''], { className: 'text-gray-400' })
|
||||
React.createElement(navigationIcon[item.icon || ''], { className: 'text-gray-400 dark:text-gray-500' })
|
||||
) : (
|
||||
<FaQuestionCircle className="text-gray-400" />
|
||||
<FaQuestionCircle className="text-gray-400 dark:text-gray-500" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
@ -171,26 +171,26 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
|
|||
type="button"
|
||||
onClick={openEditModal}
|
||||
className={`
|
||||
truncate text-gray-800 leading-6 text-sm text-left
|
||||
truncate text-gray-800 dark:text-gray-100 leading-6 text-sm text-left
|
||||
${item.children && item.children.length > 0 ? 'font-semibold' : 'font-normal'}
|
||||
${isDesignMode ? 'hover:text-blue-600' : ''}
|
||||
${isDesignMode ? 'hover:text-blue-600 dark:hover:text-blue-400' : ''}
|
||||
`}
|
||||
>
|
||||
{translate('::' + item.displayName)}
|
||||
</button>
|
||||
|
||||
{item.url && <FaExternalLinkAlt size={12} className="flex-shrink-0 text-gray-400" />}
|
||||
{item.url && <FaExternalLinkAlt size={12} className="flex-shrink-0 text-gray-400 dark:text-gray-500" />}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
{isDesignMode && (
|
||||
<div className="flex items-center gap-2 text-xs text-gray-500">
|
||||
<span className="bg-gray-200 px-2 py-1 rounded">#{item.order}</span>
|
||||
<div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span className="bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">#{item.order}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{item.children && item.children.length > 0 && (
|
||||
<span className="text-xs text-gray-500 bg-blue-100 px-2 py-1 rounded-full">
|
||||
<span className="text-xs text-gray-500 dark:text-gray-300 bg-blue-100 dark:bg-blue-900 px-2 py-1 rounded-full">
|
||||
{item.children.length}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -206,7 +206,7 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
|
|||
onRequestClose={() => setIsModalOpen(false)}
|
||||
width={600}
|
||||
>
|
||||
<h5 className="mb-4">
|
||||
<h5 className="mb-4 dark:text-gray-100">
|
||||
{modalMode === 'edit' ? translate('::Edit Menu Item') : translate('::New Item')}
|
||||
</h5>
|
||||
<Formik
|
||||
|
|
@ -249,7 +249,7 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
|
|||
type="text"
|
||||
name="code"
|
||||
component={Input}
|
||||
className="h-8 text-sm px-2"
|
||||
className="h-8 text-sm px-2 dark:bg-gray-900 dark:text-gray-100"
|
||||
autoFocus
|
||||
/>
|
||||
</FormItem>
|
||||
|
|
@ -259,7 +259,7 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
|
|||
type="text"
|
||||
name="displayName"
|
||||
component={Input}
|
||||
className="h-8 text-sm px-2"
|
||||
className="h-8 text-sm px-2 dark:bg-gray-900 dark:text-gray-100"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
|
|
@ -268,23 +268,23 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
|
|||
type="number"
|
||||
name="order"
|
||||
component={Input}
|
||||
className="h-8 text-sm px-2"
|
||||
className="h-8 text-sm px-2 dark:bg-gray-900 dark:text-gray-100"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="URL" className="mb-2">
|
||||
<Field type="text" name="url" component={Input} className="h-8 text-sm px-2" />
|
||||
<Field type="text" name="url" component={Input} className="h-8 text-sm px-2 dark:bg-gray-900 dark:text-gray-100" />
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="Icon" className="mb-2">
|
||||
<Field type="text" name="icon" component={Input} className="h-8 text-sm px-2" />
|
||||
<Field type="text" name="icon" component={Input} className="h-8 text-sm px-2 dark:bg-gray-900 dark:text-gray-100" />
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="Parent Code" className="mb-2">
|
||||
<Input
|
||||
disabled
|
||||
value={values.parentCode || ''}
|
||||
className="h-8 text-sm px-2 bg-gray-100"
|
||||
className="h-8 text-sm px-2 bg-gray-100 dark:bg-gray-800 dark:text-gray-300"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
|
|
@ -293,7 +293,7 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
|
|||
type="text"
|
||||
name="cssClass"
|
||||
component={Input}
|
||||
className="h-8 text-sm px-2"
|
||||
className="h-8 text-sm px-2 dark:bg-gray-900 dark:text-gray-100"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
|
|
@ -302,7 +302,7 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
|
|||
type="text"
|
||||
autoComplete="off"
|
||||
name="requiredPermissionName"
|
||||
className="h-8 text-sm px-2"
|
||||
className="h-8 text-sm px-2 dark:bg-gray-900 dark:text-gray-100"
|
||||
>
|
||||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||||
<Select
|
||||
|
|
@ -324,7 +324,7 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
|
|||
type="text"
|
||||
name="target"
|
||||
component={Input}
|
||||
className="h-8 text-sm px-2"
|
||||
className="h-8 text-sm px-2 dark:bg-gray-900 dark:text-gray-100"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
|
|
@ -333,7 +333,7 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
|
|||
type="text"
|
||||
name="elementId"
|
||||
component={Input}
|
||||
className="h-8 text-sm px-2"
|
||||
className="h-8 text-sm px-2 dark:bg-gray-900 dark:text-gray-100"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
|
|
|
|||
|
|
@ -52,8 +52,8 @@ export const MenuManager = () => {
|
|||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||
<div className="flex items-center gap-3 text-gray-600">
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
|
||||
<div className="flex items-center gap-3 text-gray-600 dark:text-gray-300">
|
||||
<FaSpinner className="animate-spin" />
|
||||
<span className="text-lg">Loading menu configuration...</span>
|
||||
</div>
|
||||
|
|
@ -63,16 +63,16 @@ export const MenuManager = () => {
|
|||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||
<div className="bg-white p-8 rounded-lg shadow-md max-w-md w-full mx-4">
|
||||
<div className="flex items-center gap-3 text-red-600 mb-4">
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
|
||||
<div className="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md max-w-md w-full mx-4">
|
||||
<div className="flex items-center gap-3 text-red-600 dark:text-red-400 mb-4">
|
||||
<FaRegBell size={24} />
|
||||
<h2 className="text-lg font-semibold">Error Loading Menu</h2>
|
||||
</div>
|
||||
<p className="text-gray-600 mb-6">{error}</p>
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-6">{error}</p>
|
||||
<button
|
||||
onClick={refetch}
|
||||
className="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors"
|
||||
className="w-full bg-blue-600 dark:bg-blue-700 text-white py-2 px-4 rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800 transition-colors"
|
||||
>
|
||||
Retry
|
||||
</button>
|
||||
|
|
@ -89,20 +89,20 @@ export const MenuManager = () => {
|
|||
defaultTitle={APP_NAME}
|
||||
></Helmet>
|
||||
|
||||
<div className="bg-white rounded px-2 sm:px-2 lg:px-3 py-3">
|
||||
<div className="bg-white dark:bg-gray-800 rounded px-2 sm:px-2 lg:px-3 py-3">
|
||||
<div className="flex items-center justify-between mb-2 flex-wrap gap-4">
|
||||
{/* Sol kısım: Başlık */}
|
||||
<div className="flex items-center gap-2">
|
||||
<FaBars size={20} className="text-gray-600" />
|
||||
<h2 className="text-base font-semibold text-gray-900">Menu Manager</h2>
|
||||
<span className="text-sm text-gray-500">({menuItems.length} root items)</span>
|
||||
<FaBars size={20} className="text-gray-600 dark:text-gray-300" />
|
||||
<h2 className="text-base font-semibold text-gray-900 dark:text-gray-100">Menu Manager</h2>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">({menuItems.length} root items)</span>
|
||||
</div>
|
||||
|
||||
{/* Sağ kısım: Design Mode + Save butonu */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
className={`text-sm font-medium ${isDesignMode ? 'text-blue-600' : 'text-gray-500'}`}
|
||||
className={`text-sm font-medium ${isDesignMode ? 'text-blue-600 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400'}`}
|
||||
>
|
||||
Design Mode
|
||||
</span>
|
||||
|
|
@ -110,12 +110,12 @@ export const MenuManager = () => {
|
|||
onClick={handleToggleDesignMode}
|
||||
className={`
|
||||
relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
|
||||
${isDesignMode ? 'bg-blue-600' : 'bg-gray-200'}
|
||||
${isDesignMode ? 'bg-blue-600 dark:bg-blue-700' : 'bg-gray-200 dark:bg-gray-700'}
|
||||
`}
|
||||
>
|
||||
<span
|
||||
className={`
|
||||
inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ease-in-out
|
||||
inline-block h-4 w-4 transform rounded-full bg-white dark:bg-gray-200 transition-transform duration-200 ease-in-out
|
||||
${isDesignMode ? 'translate-x-6' : 'translate-x-1'}
|
||||
`}
|
||||
/>
|
||||
|
|
@ -128,7 +128,7 @@ export const MenuManager = () => {
|
|||
disabled={!isDesignMode || isSaving}
|
||||
className={`
|
||||
flex items-center gap-2 px-2 py-1 rounded-lg transition-colors
|
||||
${isDesignMode ? 'bg-green-600 hover:bg-green-700 text-white' : 'bg-gray-300 text-gray-500 cursor-not-allowed'}
|
||||
${isDesignMode ? 'bg-green-600 dark:bg-green-700 hover:bg-green-700 dark:hover:bg-green-800 text-white' : 'bg-gray-300 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed'}
|
||||
${isSaving ? 'opacity-50' : ''}
|
||||
`}
|
||||
>
|
||||
|
|
@ -156,8 +156,8 @@ export const MenuManager = () => {
|
|||
refetch={refetch}
|
||||
/>
|
||||
) : (
|
||||
<div className="text-center py-12 text-gray-500">
|
||||
<FaBars size={24} className="mx-auto mb-4 text-gray-300" />
|
||||
<div className="text-center py-12 text-gray-500 dark:text-gray-400">
|
||||
<FaBars size={24} className="mx-auto mb-4 text-gray-300 dark:text-gray-600" />
|
||||
<p className="text-lg">No menu items found</p>
|
||||
<p className="text-sm">Try refreshing the page or contact your administrator</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -192,7 +192,7 @@ export const SortableMenuTree: React.FC<SortableMenuTreeProps> = ({
|
|||
|
||||
const renderMenuItem = (item: MenuItem, depth: number = 0): React.ReactNode => {
|
||||
return (
|
||||
<div key={item.id}>
|
||||
<div key={item.id} className="bg-white dark:bg-gray-800 rounded-md">
|
||||
<MenuItemComponent item={item} isDesignMode={isDesignMode} depth={depth} refetch={refetch} permissions={permissions}>
|
||||
{Array.isArray(item.children) && item.children.length > 0 && (
|
||||
<SortableContext
|
||||
|
|
@ -201,7 +201,7 @@ export const SortableMenuTree: React.FC<SortableMenuTreeProps> = ({
|
|||
.map((child) => child.id)}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
<div className="ml-4">
|
||||
<div className="ml-4 border-gray-200 dark:border-gray-700">
|
||||
{item.children.map((child) => renderMenuItem(child, depth + 1))}
|
||||
</div>
|
||||
</SortableContext>
|
||||
|
|
@ -222,14 +222,16 @@ export const SortableMenuTree: React.FC<SortableMenuTreeProps> = ({
|
|||
|
||||
<DragOverlay>
|
||||
{activeItem ? (
|
||||
<MenuItemComponent
|
||||
item={activeItem}
|
||||
isDesignMode={isDesignMode}
|
||||
depth={0}
|
||||
isDragOverlay={true}
|
||||
refetch={refetch}
|
||||
permissions={permissions}
|
||||
/>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-md shadow-lg">
|
||||
<MenuItemComponent
|
||||
item={activeItem}
|
||||
isDesignMode={isDesignMode}
|
||||
depth={0}
|
||||
isDragOverlay={true}
|
||||
refetch={refetch}
|
||||
permissions={permissions}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</DragOverlay>
|
||||
</DndContext>
|
||||
|
|
|
|||
|
|
@ -50,18 +50,18 @@ const DesignerDrawer: React.FC<DesignerDrawerProps> = ({
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-y-0 right-0 z-50 w-[420px] border-l border-slate-200 bg-white shadow-2xl">
|
||||
<div className="flex h-full flex-col bg-white">
|
||||
<div className="border-b border-slate-200 px-5 py-4">
|
||||
<div className="fixed inset-y-0 right-0 z-50 w-[420px] border-l border-slate-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-2xl">
|
||||
<div className="flex h-full flex-col bg-white dark:bg-gray-900">
|
||||
<div className="border-b border-slate-200 dark:border-gray-700 px-5 py-4">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-sky-700">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-sky-700 dark:text-sky-400">
|
||||
{pageTitle} {translate('::Public.designer.title')}
|
||||
</p>
|
||||
<h3 className="mt-2 text-lg font-semibold text-slate-900">
|
||||
<h3 className="mt-2 text-lg font-semibold text-slate-900 dark:text-gray-100">
|
||||
{selection?.title ?? translate('::Public.designer.noSelection')}
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-slate-500">
|
||||
<p className="mt-1 text-sm text-slate-500 dark:text-gray-400">
|
||||
{selection?.description ?? translate('::Public.designer.selectField')}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -80,8 +80,8 @@ const DesignerDrawer: React.FC<DesignerDrawerProps> = ({
|
|||
className={`flex h-9 w-9 items-center justify-center rounded-lg text-xl transition-all
|
||||
${
|
||||
normalizeLanguageKey(selectedLanguage) === language.key
|
||||
? 'border-sky-500 bg-sky-50 ring-2 ring-sky-200'
|
||||
: 'border-slate-200 hover:border-slate-400 hover:bg-slate-50'
|
||||
? 'border-sky-500 bg-sky-50 dark:bg-sky-900/20 ring-2 ring-sky-200 dark:ring-sky-700'
|
||||
: 'border-slate-200 dark:border-gray-700 hover:border-slate-400 dark:hover:border-gray-500 hover:bg-slate-50 dark:hover:bg-gray-800'
|
||||
}`}
|
||||
>
|
||||
<Avatar
|
||||
|
|
@ -114,11 +114,11 @@ const DesignerDrawer: React.FC<DesignerDrawerProps> = ({
|
|||
|
||||
return (
|
||||
<div key={field.key}>
|
||||
<label className="mb-1 block text-sm font-semibold text-slate-700">
|
||||
<label className="mb-1 block text-sm font-semibold text-slate-700 dark:text-gray-200">
|
||||
{field.localizationKey || field.label}
|
||||
</label>
|
||||
{field.localizationKey && field.localizationKey !== field.label && (
|
||||
<p className="mb-2 text-xs text-slate-500">{field.label}</p>
|
||||
<p className="mb-2 text-xs text-slate-500 dark:text-gray-400">{field.label}</p>
|
||||
)}
|
||||
{field.type === 'icon' ? (
|
||||
<IconPickerField
|
||||
|
|
@ -137,13 +137,13 @@ const DesignerDrawer: React.FC<DesignerDrawerProps> = ({
|
|||
})}
|
||||
|
||||
{!selection && (
|
||||
<div className="rounded-2xl border border-dashed border-slate-300 bg-slate-50 px-4 py-6 text-sm text-slate-500">
|
||||
<div className="rounded-2xl border border-dashed border-slate-300 dark:border-gray-700 bg-slate-50 dark:bg-gray-800 px-4 py-6 text-sm text-slate-500 dark:text-gray-400">
|
||||
{translate('::Public.designer.noSelectionDetails')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between border-t border-slate-200 px-5 py-4">
|
||||
<div className="flex items-center justify-between border-t border-slate-200 dark:border-gray-700 px-5 py-4">
|
||||
<Button variant="solid" block={true} onClick={onSave}>
|
||||
{translate('::Public.designer.save')}
|
||||
</Button>
|
||||
|
|
|
|||
Loading…
Reference in a new issue