componenets standardization 1
This commit is contained in:
IGNY8 VPS (Salman)
@@ -127,26 +127,28 @@ const CreditsAndBilling: React.FC = () => {
|
||||
{/* Tabs */}
|
||||
<div className="mb-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<nav className="-mb-px flex space-x-8">
|
||||
<button
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setActiveTab('overview')}
|
||||
className={`py-4 px-1 border-b-2 font-medium text-sm ${
|
||||
className={`py-4 px-1 border-b-2 font-medium text-sm rounded-none ${
|
||||
activeTab === 'overview'
|
||||
? 'border-primary-500 text-primary-600 dark:text-primary-400'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
Overview
|
||||
</button>
|
||||
<button
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setActiveTab('transactions')}
|
||||
className={`py-4 px-1 border-b-2 font-medium text-sm ${
|
||||
className={`py-4 px-1 border-b-2 font-medium text-sm rounded-none ${
|
||||
activeTab === 'transactions'
|
||||
? 'border-primary-500 text-primary-600 dark:text-primary-400'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
Transactions ({transactions.length})
|
||||
</button>
|
||||
</Button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -5,6 +5,8 @@ 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();
|
||||
@@ -49,13 +51,10 @@ export default function GeneralSettings() {
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="records_per_page">Records Per Page</Label>
|
||||
<input
|
||||
<InputField
|
||||
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}
|
||||
value={tableSettings.records_per_page.toString()}
|
||||
onChange={(e) => setTableSettings({
|
||||
...tableSettings,
|
||||
records_per_page: parseInt(e.target.value) || 20
|
||||
@@ -65,10 +64,9 @@ export default function GeneralSettings() {
|
||||
|
||||
<div>
|
||||
<Label htmlFor="default_sort">Default Sort Field</Label>
|
||||
<input
|
||||
<InputField
|
||||
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,
|
||||
@@ -79,18 +77,17 @@ export default function GeneralSettings() {
|
||||
|
||||
<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"
|
||||
<Select
|
||||
options={[
|
||||
{ value: 'asc', label: 'Ascending' },
|
||||
{ value: 'desc', label: 'Descending' },
|
||||
]}
|
||||
value={tableSettings.default_sort_direction}
|
||||
onChange={(e) => setTableSettings({
|
||||
onChange={(value) => setTableSettings({
|
||||
...tableSettings,
|
||||
default_sort_direction: e.target.value as 'asc' | 'desc'
|
||||
default_sort_direction: value as 'asc' | 'desc'
|
||||
})}
|
||||
>
|
||||
<option value="asc">Ascending</option>
|
||||
<option value="desc">Descending</option>
|
||||
</select>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,6 +5,8 @@ import FormModal, { FormField } from '../../components/common/FormModal';
|
||||
import Button from '../../components/ui/button/Button';
|
||||
import { useToast } from '../../components/ui/toast/ToastContainer';
|
||||
import Alert from '../../components/ui/alert/Alert';
|
||||
import Select from '../../components/form/Select';
|
||||
import Checkbox from '../../components/form/input/Checkbox';
|
||||
import {
|
||||
fetchSites,
|
||||
createSite,
|
||||
@@ -475,21 +477,20 @@ export default function Sites() {
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Select Industry
|
||||
</label>
|
||||
<select
|
||||
<Select
|
||||
options={[
|
||||
{ value: '', label: 'Select an industry...' },
|
||||
...industries.map((industry) => ({
|
||||
value: industry.slug,
|
||||
label: industry.name,
|
||||
})),
|
||||
]}
|
||||
value={selectedIndustry}
|
||||
onChange={(e) => {
|
||||
setSelectedIndustry(e.target.value);
|
||||
onChange={(value) => {
|
||||
setSelectedIndustry(value);
|
||||
setSelectedSectors([]); // Reset sectors when industry changes
|
||||
}}
|
||||
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"
|
||||
>
|
||||
<option value="">Select an industry...</option>
|
||||
{industries.map((industry) => (
|
||||
<option key={industry.slug} value={industry.slug}>
|
||||
{industry.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
/>
|
||||
{selectedIndustry && (
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{industries.find(i => i.slug === selectedIndustry)?.description}
|
||||
@@ -504,15 +505,14 @@ export default function Sites() {
|
||||
</label>
|
||||
<div className="space-y-2 max-h-64 overflow-y-auto border border-gray-200 rounded-lg p-4 dark:border-gray-700">
|
||||
{getIndustrySectors().map((sector) => (
|
||||
<label
|
||||
<div
|
||||
key={sector.slug}
|
||||
className="flex items-start space-x-3 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
<Checkbox
|
||||
checked={selectedSectors.includes(sector.slug)}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
onChange={(checked) => {
|
||||
if (checked) {
|
||||
if (selectedSectors.length >= 5) {
|
||||
toast.error('Maximum 5 sectors allowed per site');
|
||||
return;
|
||||
@@ -522,17 +522,18 @@ export default function Sites() {
|
||||
setSelectedSectors(selectedSectors.filter(s => s !== sector.slug));
|
||||
}
|
||||
}}
|
||||
className="mt-1 h-4 w-4 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
label={
|
||||
<div className="flex-1">
|
||||
<div className="font-medium text-sm text-gray-900 dark:text-white">
|
||||
{sector.name}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
{sector.description}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium text-sm text-gray-900 dark:text-white">
|
||||
{sector.name}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
{sector.description}
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
|
||||
Reference in New Issue
Block a user