updates
This commit is contained in:
@@ -148,172 +148,220 @@ export function SettingsForm() {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<FieldGroup>
|
||||
{/* General Info */}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<RhfTextField
|
||||
name="name"
|
||||
label="Workshop Name"
|
||||
placeholder="My Workshop"
|
||||
required
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<RhfTextField
|
||||
name="email"
|
||||
label="Email"
|
||||
placeholder="workshop@example.com"
|
||||
type="email"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<div className="grid gap-6 lg:grid-cols-12">
|
||||
{/* Main Content - 8/12 */}
|
||||
<div className="lg:col-span-8">
|
||||
<FieldGroup className="space-y-6">
|
||||
{/* General Information Section */}
|
||||
<div>
|
||||
<h3 className="mb-4 text-base font-semibold">General Information</h3>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<RhfTextField
|
||||
name="name"
|
||||
label="Workshop Name"
|
||||
placeholder="My Workshop"
|
||||
required
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<RhfTextField
|
||||
name="email"
|
||||
label="Email"
|
||||
placeholder="workshop@example.com"
|
||||
type="email"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid gap-4 sm:grid-cols-2">
|
||||
<RhfTextField
|
||||
name="phone"
|
||||
label="Phone"
|
||||
placeholder="+971501234567"
|
||||
type="tel"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<RhfTextField
|
||||
name="alternative_phone"
|
||||
label="Alternative Phone"
|
||||
placeholder="+971509876543"
|
||||
type="tel"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid gap-4 sm:grid-cols-2">
|
||||
<RhfTextField
|
||||
name="website"
|
||||
label="Website"
|
||||
placeholder="https://example.com"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<RhfTextField
|
||||
name="upi_id"
|
||||
label="UPI ID"
|
||||
placeholder="workshop@upi"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Address Section */}
|
||||
<div className="border-t pt-6">
|
||||
<h3 className="mb-4 text-base font-semibold">Address</h3>
|
||||
<RhfTextField
|
||||
name="first_address_line"
|
||||
label="Address Line 1"
|
||||
placeholder="Street 10"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
|
||||
<div className="mt-4">
|
||||
<RhfTextField
|
||||
name="second_address_line"
|
||||
label="Address Line 2"
|
||||
placeholder="Near Central Plaza"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid gap-4 sm:grid-cols-2">
|
||||
<RhfAsyncSelectField
|
||||
name="country"
|
||||
label="Country"
|
||||
placeholder="Select country"
|
||||
queryKey={["countries"]}
|
||||
listFn={() => api.geo.countries()}
|
||||
mapOption={mapLookupOption}
|
||||
{...STORE_OBJECT}
|
||||
/>
|
||||
<RhfAsyncSelectField
|
||||
name="state"
|
||||
label="State"
|
||||
placeholder="Select state"
|
||||
queryKey={["states"]}
|
||||
listFn={() => api.geo.states()}
|
||||
mapOption={mapLookupOption}
|
||||
{...STORE_OBJECT}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid gap-4 sm:grid-cols-2">
|
||||
<RhfTextField
|
||||
name="city"
|
||||
label="City"
|
||||
placeholder="Dubai"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<RhfTextField
|
||||
name="zip_code"
|
||||
label="Zip Code"
|
||||
placeholder="00000"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* More Information Section */}
|
||||
<div className="border-t pt-6">
|
||||
<h3 className="mb-4 text-base font-semibold">More Information</h3>
|
||||
<RhfTextareaField
|
||||
name="description"
|
||||
label="Description"
|
||||
placeholder="About the workshop..."
|
||||
disabled={isLoading}
|
||||
/>
|
||||
|
||||
<div className="mt-4">
|
||||
<RhfTextareaField
|
||||
name="bank_details"
|
||||
label="Bank Details"
|
||||
placeholder="Bank name, account number, IBAN..."
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</FieldGroup>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<RhfTextField
|
||||
name="phone"
|
||||
label="Phone"
|
||||
placeholder="+971501234567"
|
||||
type="tel"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<RhfTextField
|
||||
name="alternative_phone"
|
||||
label="Alternative Phone"
|
||||
placeholder="+971509876543"
|
||||
type="tel"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
{/* Sidebar - 4/12 */}
|
||||
<div className="lg:col-span-4">
|
||||
<FieldGroup className="sticky top-24 space-y-6">
|
||||
{/* Location & Time Section */}
|
||||
<div className="rounded-lg border bg-card p-4">
|
||||
<h3 className="mb-4 text-base font-semibold">Location & Time</h3>
|
||||
|
||||
<RhfTextField
|
||||
name="latitude"
|
||||
label="Latitude"
|
||||
placeholder="25.2048"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
|
||||
<div className="mt-4">
|
||||
<RhfTextField
|
||||
name="longitude"
|
||||
label="Longitude"
|
||||
placeholder="55.2708"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<RhfTextField
|
||||
name="time_zone"
|
||||
label="Time Zone"
|
||||
placeholder="Asia/Dubai"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<RhfSelectField
|
||||
name="first_day_of_work"
|
||||
label="First Day of Work"
|
||||
placeholder="Select day"
|
||||
options={FIRST_DAY_OPTIONS}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Policies Section */}
|
||||
<div className="rounded-lg border bg-card p-4">
|
||||
<h3 className="mb-4 text-base font-semibold">Policies</h3>
|
||||
|
||||
<RhfTextareaField
|
||||
name="security"
|
||||
label="Security Policy"
|
||||
placeholder="Security policy text..."
|
||||
disabled={isLoading}
|
||||
/>
|
||||
|
||||
<div className="mt-4">
|
||||
<RhfTextareaField
|
||||
name="privacy_policy"
|
||||
label="Privacy Policy"
|
||||
placeholder="Privacy policy text..."
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Button */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isPending || isLoading}
|
||||
size="lg"
|
||||
className="w-full"
|
||||
>
|
||||
<Save className="me-2" />
|
||||
{isPending ? "Saving..." : "Save Settings"}
|
||||
</Button>
|
||||
</div>
|
||||
</FieldGroup>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<RhfTextField
|
||||
name="website"
|
||||
label="Website"
|
||||
placeholder="https://example.com"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<RhfTextField
|
||||
name="upi_id"
|
||||
label="UPI ID"
|
||||
placeholder="workshop@upi"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<RhfTextField
|
||||
name="time_zone"
|
||||
label="Time Zone"
|
||||
placeholder="Asia/Dubai"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<RhfSelectField
|
||||
name="first_day_of_work"
|
||||
label="First Day of Work"
|
||||
placeholder="Select day"
|
||||
options={FIRST_DAY_OPTIONS}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Address */}
|
||||
<RhfTextField
|
||||
name="first_address_line"
|
||||
label="Address Line 1"
|
||||
placeholder="Street 10"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<RhfTextField
|
||||
name="second_address_line"
|
||||
label="Address Line 2"
|
||||
placeholder="Near Central Plaza"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<RhfAsyncSelectField
|
||||
name="country"
|
||||
label="Country"
|
||||
placeholder="Select country"
|
||||
queryKey={["countries"]}
|
||||
listFn={() => api.geo.countries()}
|
||||
mapOption={mapLookupOption}
|
||||
{...STORE_OBJECT}
|
||||
/>
|
||||
<RhfAsyncSelectField
|
||||
name="state"
|
||||
label="State"
|
||||
placeholder="Select state"
|
||||
queryKey={["states"]}
|
||||
listFn={() => api.geo.states()}
|
||||
mapOption={mapLookupOption}
|
||||
{...STORE_OBJECT}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<RhfTextField
|
||||
name="city"
|
||||
label="City"
|
||||
placeholder="Dubai"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<RhfTextField
|
||||
name="zip_code"
|
||||
label="Zip Code"
|
||||
placeholder="00000"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Location */}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<RhfTextField
|
||||
name="latitude"
|
||||
label="Latitude"
|
||||
placeholder="25.2048"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<RhfTextField
|
||||
name="longitude"
|
||||
label="Longitude"
|
||||
placeholder="55.2708"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Other */}
|
||||
<RhfTextareaField
|
||||
name="bank_details"
|
||||
label="Bank Details"
|
||||
placeholder="Bank name, account number, IBAN..."
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<RhfTextareaField
|
||||
name="description"
|
||||
label="Description"
|
||||
placeholder="About the workshop..."
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<RhfTextareaField
|
||||
name="security"
|
||||
label="Security Policy"
|
||||
placeholder="Security policy text..."
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<RhfTextareaField
|
||||
name="privacy_policy"
|
||||
label="Privacy Policy"
|
||||
placeholder="Privacy policy text..."
|
||||
disabled={isLoading}
|
||||
/>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit" disabled={isPending || isLoading}>
|
||||
<Save />
|
||||
{isPending ? "Saving..." : "Save Settings"}
|
||||
</Button>
|
||||
</div>
|
||||
</FieldGroup>
|
||||
</div>
|
||||
</Rhform>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user