113 lines
4.6 KiB
TypeScript
113 lines
4.6 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import PageMeta from "../../components/common/PageMeta";
|
|
import ComponentCard from "../../components/common/ComponentCard";
|
|
import { useSettingsStore } from '../../store/settingsStore';
|
|
import { useToast } from '../../components/ui/toast/ToastContainer';
|
|
import Button from '../../components/ui/button/Button';
|
|
import Label from '../../components/form/Label';
|
|
|
|
export default function GeneralSettings() {
|
|
const toast = useToast();
|
|
const { accountSettings, loading, loadAccountSettings, updateAccountSetting } = useSettingsStore();
|
|
|
|
// Form state
|
|
const [tableSettings, setTableSettings] = useState({
|
|
records_per_page: 20,
|
|
default_sort: 'created_at',
|
|
default_sort_direction: 'desc',
|
|
});
|
|
|
|
useEffect(() => {
|
|
loadAccountSettings();
|
|
}, [loadAccountSettings]);
|
|
|
|
useEffect(() => {
|
|
if (accountSettings['table_settings']) {
|
|
setTableSettings(accountSettings['table_settings'].config);
|
|
}
|
|
}, [accountSettings]);
|
|
|
|
const handleSave = async () => {
|
|
try {
|
|
await updateAccountSetting('table_settings', tableSettings);
|
|
toast.success('Settings saved successfully');
|
|
} catch (error: any) {
|
|
toast.error(`Failed to save settings: ${error.message}`);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<PageMeta title="General Settings - IGNY8" description="Plugin configuration" />
|
|
|
|
<ComponentCard title="General Settings" desc="Configure plugin settings, automation, and table preferences">
|
|
<div className="space-y-6">
|
|
{/* Table Settings */}
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-semibold">Table Settings</h3>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<Label htmlFor="records_per_page">Records Per Page</Label>
|
|
<input
|
|
id="records_per_page"
|
|
type="number"
|
|
min="5"
|
|
max="100"
|
|
className="h-9 w-full rounded-lg border border-gray-300 bg-transparent px-3 py-2 text-sm shadow-theme-xs text-gray-800 placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
|
|
value={tableSettings.records_per_page}
|
|
onChange={(e) => setTableSettings({
|
|
...tableSettings,
|
|
records_per_page: parseInt(e.target.value) || 20
|
|
})}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="default_sort">Default Sort Field</Label>
|
|
<input
|
|
id="default_sort"
|
|
type="text"
|
|
className="h-9 w-full rounded-lg border border-gray-300 bg-transparent px-3 py-2 text-sm shadow-theme-xs text-gray-800 placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
|
|
value={tableSettings.default_sort}
|
|
onChange={(e) => setTableSettings({
|
|
...tableSettings,
|
|
default_sort: e.target.value
|
|
})}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="default_sort_direction">Default Sort Direction</Label>
|
|
<select
|
|
id="default_sort_direction"
|
|
className="h-9 w-full rounded-lg border border-gray-300 bg-transparent px-3 py-2 text-sm shadow-theme-xs text-gray-800 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:focus:border-brand-800"
|
|
value={tableSettings.default_sort_direction}
|
|
onChange={(e) => setTableSettings({
|
|
...tableSettings,
|
|
default_sort_direction: e.target.value as 'asc' | 'desc'
|
|
})}
|
|
>
|
|
<option value="asc">Ascending</option>
|
|
<option value="desc">Descending</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end">
|
|
<Button
|
|
onClick={handleSave}
|
|
disabled={loading}
|
|
className="px-6"
|
|
>
|
|
{loading ? 'Saving...' : 'Save Settings'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</ComponentCard>
|
|
</>
|
|
);
|
|
}
|
|
|