updates on the ui changes and table

This commit is contained in:
2026-08-17 15:39:46 +05:30
parent a46212f291
commit 809d046323
38 changed files with 6403 additions and 7019 deletions

View File

@@ -16,6 +16,7 @@ import { Divider } from '@astryxdesign/core/Divider';
import Loader from 'components/Loader';
import PageHeader from 'components/nearle_components/PageHeader';
import { PageShell } from 'components/nearle_components/PageLayout';
import { getusers } from 'pages/api/api';
import { updateProfilePassword } from 'pages/api/doormileApi';
import { DT } from 'themes/dt/tokens';
@@ -110,73 +111,75 @@ const ViewProfile = () => {
<>
{isLoading && <Loader />}
<PageHeader title="My Profile" subtitle="Account & Security" />
<PageShell>
<PageHeader title="My Profile" subtitle="Account & Security" />
<Card padding={4} elevation="none" style={{ marginTop: 16, marginBottom: 20 }}>
<HStack gap={3} vAlign="center" wrap="wrap">
<Avatar name={fullname} size={72} tooltip={false} />
<VStack gap={2} padding={0}>
<Text type="heading" weight="bold">
{fullname}
</Text>
<HStack gap={2} vAlign="center" wrap="wrap">
{roleLabel !== '—' && <Badge variant="neutral" icon={<MdVerifiedUser size={14} />} label={roleLabel} />}
{(userData?.id != null || userData?.userid != null) && (
<Text color="secondary" weight="semibold">
ID #{userData.id ?? userData.userid}
</Text>
)}
<HStack gap={1} vAlign="center">
<MdLocationOn size={15} color={DT.textSecondary} />
<Text color="secondary" weight="semibold">
{tenantLabel}
</Text>
<Card padding={4} elevation="none">
<HStack gap={3} vAlign="center" wrap="wrap">
<Avatar name={fullname} size={72} tooltip={false} />
<VStack gap={2} padding={0}>
<Text type="heading" weight="bold">
{fullname}
</Text>
<HStack gap={2} vAlign="center" wrap="wrap">
{roleLabel !== '—' && <Badge variant="neutral" icon={<MdVerifiedUser size={14} />} label={roleLabel} />}
{(userData?.id != null || userData?.userid != null) && (
<Text color="secondary" weight="semibold">
ID #{userData.id ?? userData.userid}
</Text>
)}
<HStack gap={1} vAlign="center">
<MdLocationOn size={15} color={DT.textSecondary} />
<Text color="secondary" weight="semibold">
{tenantLabel}
</Text>
</HStack>
</HStack>
</HStack>
</VStack>
</HStack>
</Card>
</VStack>
</HStack>
</Card>
<Grid columns={{ minWidth: 320 }} gap={3}>
<SectionCard title="Account" icon={MdBadge}>
<VStack gap={4} padding={0}>
<InfoField icon={MdPerson} label="User Name" value={userData?.name || userData?.fullname} />
<InfoField icon={MdBadge} label="User ID" value={userData?.id ?? userData?.userid} />
<InfoField icon={MdMail} label="E-Mail" value={userData?.email} accent="#0ea5e9" />
<InfoField icon={MdVerifiedUser} label="Role" value={roleLabel} />
<InfoField icon={MdLocationOn} label="Tenant" value={tenantLabel} accent="#14b8a6" />
</VStack>
</SectionCard>
<Grid columns={{ minWidth: 320, repeat: 'fit' }} gap={3}>
<SectionCard title="Account" icon={MdBadge}>
<VStack gap={4} padding={0}>
<InfoField icon={MdPerson} label="User Name" value={userData?.name || userData?.fullname} />
<InfoField icon={MdBadge} label="User ID" value={userData?.id ?? userData?.userid} />
<InfoField icon={MdMail} label="E-Mail" value={userData?.email} accent="#0ea5e9" />
<InfoField icon={MdVerifiedUser} label="Role" value={roleLabel} />
<InfoField icon={MdLocationOn} label="Tenant" value={tenantLabel} accent="#14b8a6" />
</VStack>
</SectionCard>
<SectionCard title="Security" icon={MdShield}>
<VStack gap={3} padding={0}>
<TextInput
label="Current Password"
type="password"
value={currentPassword}
onChange={setCurrentPassword}
placeholder="Current password"
/>
<TextInput label="New Password" type="password" value={newPassword} onChange={setNewPassword} placeholder="New password" />
<TextInput
label="Confirm New Password"
type="password"
value={confirmPassword}
onChange={setConfirmPassword}
placeholder="Confirm new password"
/>
<Divider />
<Button
label="Update Password"
variant="primary"
icon={<MdLock size={16} />}
onClick={handleChangePassword}
isLoading={changePasswordMutation.isPending}
style={{ alignSelf: 'flex-start' }}
/>
</VStack>
</SectionCard>
</Grid>
<SectionCard title="Security" icon={MdShield}>
<VStack gap={3} padding={0}>
<TextInput
label="Current Password"
type="password"
value={currentPassword}
onChange={setCurrentPassword}
placeholder="Current password"
/>
<TextInput label="New Password" type="password" value={newPassword} onChange={setNewPassword} placeholder="New password" />
<TextInput
label="Confirm New Password"
type="password"
value={confirmPassword}
onChange={setConfirmPassword}
placeholder="Confirm new password"
/>
<Divider />
<Button
label="Update Password"
variant="primary"
icon={<MdLock size={16} />}
onClick={handleChangePassword}
isLoading={changePasswordMutation.isPending}
style={{ alignSelf: 'flex-start' }}
/>
</VStack>
</SectionCard>
</Grid>
</PageShell>
</>
);
};