110 lines
3.7 KiB
TypeScript
110 lines
3.7 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';
|
|
import InputField from '../../components/form/input/InputField';
|
|
import Select from '../../components/form/Select';
|
|
|
|
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="App Preferences - IGNY8" description="Customize your IGNY8 experience" />
|
|
|
|
<ComponentCard title="App Preferences" desc="Customize table views, automation settings, and interface 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>
|
|
<InputField
|
|
id="records_per_page"
|
|
type="number"
|
|
value={tableSettings.records_per_page.toString()}
|
|
onChange={(e) => setTableSettings({
|
|
...tableSettings,
|
|
records_per_page: parseInt(e.target.value) || 20
|
|
})}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="default_sort">Default Sort Field</Label>
|
|
<InputField
|
|
id="default_sort"
|
|
type="text"
|
|
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
|
|
options={[
|
|
{ value: 'asc', label: 'Ascending' },
|
|
{ value: 'desc', label: 'Descending' },
|
|
]}
|
|
value={tableSettings.default_sort_direction}
|
|
onChange={(value) => setTableSettings({
|
|
...tableSettings,
|
|
default_sort_direction: value as 'asc' | 'desc'
|
|
})}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end">
|
|
<Button
|
|
onClick={handleSave}
|
|
disabled={loading}
|
|
className="px-6"
|
|
>
|
|
{loading ? 'Saving...' : 'Save Settings'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</ComponentCard>
|
|
</>
|
|
);
|
|
}
|
|
|