Skip to content

Commit 5f37c74

Browse files
raghavyuvaraghavyuva
committed
style(view): format the view
1 parent 3a19009 commit 5f37c74

File tree

22 files changed

+320
-293
lines changed

22 files changed

+320
-293
lines changed

‎view/app/dashboard/page.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import useMonitor from './hooks/use-monitor';
55
import ContainersTable from './components/containers/container-table';
66
import SystemStats from './components/system/system-stats';
77
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
8-
import { Package } from 'lucide-react';
8+
import { Package, ArrowRight } from 'lucide-react';
99
import DiskUsageCard from './components/system/disk-usage';
1010
import { useTranslation } from '@/hooks/use-translation';
1111
import { useAppSelector } from '@/redux/hooks';
@@ -15,6 +15,8 @@ import { useFeatureFlags } from '@/hooks/features_provider';
1515
import Skeleton from '../file-manager/components/skeleton/Skeleton';
1616
import DisabledFeature from '@/components/features/disabled-feature';
1717
import { FeatureNames } from '@/types/feature-flags';
18+
import { Button } from '@/components/ui/button';
19+
import { useRouter } from 'next/navigation';
1820

1921
function DashboardPage() {
2022
const { t } = useTranslation();
@@ -24,7 +26,6 @@ function DashboardPage() {
2426
skip: !activeOrganization
2527
});
2628
const { isFeatureEnabled, isLoading: isFeatureFlagsLoading } = useFeatureFlags();
27-
2829
if (isFeatureFlagsLoading) {
2930
return <Skeleton />;
3031
}
@@ -53,7 +54,16 @@ function DashboardPage() {
5354

5455
export default DashboardPage;
5556

56-
const MonitoringSection = ({ systemStats, containersData, t }: { systemStats: any, containersData: any, t: any }) => {
57+
const MonitoringSection = ({
58+
systemStats,
59+
containersData,
60+
t
61+
}: {
62+
systemStats: any;
63+
containersData: any;
64+
t: any;
65+
}) => {
66+
const router = useRouter();
5767
return (
5868
<>
5969
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -63,11 +73,15 @@ const MonitoringSection = ({ systemStats, containersData, t }: { systemStats: an
6373
<DiskUsageCard systemStats={systemStats} />
6474
</div>
6575
<Card>
66-
<CardHeader>
76+
<CardHeader className="flex flex-row items-center justify-between">
6777
<CardTitle className="text-xs sm:text-sm font-medium flex items-center">
6878
<Package className="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2" />
6979
{t('dashboard.containers.title')}
7080
</CardTitle>
81+
<Button variant="outline" size="sm" onClick={() => router.push('/containers')}>
82+
<ArrowRight className="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2" />
83+
{t('dashboard.containers.viewAll')}
84+
</Button>
7185
</CardHeader>
7286
<CardContent>
7387
<ContainersTable containersData={containersData} />

‎view/app/file-manager/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ function FileManager() {
7777
}
7878

7979
if (!isFeatureEnabled(FeatureNames.FeatureFileManager)) {
80-
return <DisabledFeature />;
80+
return <DisabledFeature />;
8181
}
8282

8383
if (!canRead) {

‎view/app/self-host/page.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,7 @@ function page() {
5959
}
6060

6161
if (!isFeatureEnabled(FeatureNames.FeatureSelfHosted)) {
62-
return (
63-
<DisabledFeature />
64-
);
62+
return <DisabledFeature />;
6563
}
6664

6765
const renderContent = () => {

‎view/app/settings/general/components/AccountSection.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ function AccountSection({
6464
handleThemeChange,
6565
handleLanguageChange,
6666
handleAutoUpdateChange,
67-
handleFontUpdate
67+
handleFontUpdate
6868
}: AccountSectionProps) {
6969
const { t } = useTranslation();
7070
const [sendVerificationEmail, { isLoading: isSendingVerification }] =
@@ -198,8 +198,8 @@ function AccountSection({
198198
</div>
199199
<div className="flex justify-between items-center">
200200
<p className="text-muted-foreground text-sm">{t('settings.preferences.font')}</p>
201-
<Select
202-
value={userSettings.font_family || 'outfit'}
201+
<Select
202+
value={userSettings.font_family || 'outfit'}
203203
onValueChange={handleFontChange}
204204
disabled={isUpdatingFont}
205205
>

‎view/app/settings/general/components/FeatureFlagsSettings.tsx‎

Lines changed: 86 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -4,95 +4,98 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
44
import { useTranslation } from '@/hooks/use-translation';
55
import { toast } from 'sonner';
66
import { TabsContent } from '@/components/ui/tabs';
7-
import { useGetAllFeatureFlagsQuery, useUpdateFeatureFlagMutation } from '@/redux/services/feature-flags/featureFlagsApi';
7+
import {
8+
useGetAllFeatureFlagsQuery,
9+
useUpdateFeatureFlagMutation
10+
} from '@/redux/services/feature-flags/featureFlagsApi';
811
import { Separator } from '@/components/ui/separator';
912
import { FeatureFlag, FeatureName, featureGroups } from '@/types/feature-flags';
1013

11-
1214
export default function FeatureFlagsSettings() {
13-
const { t } = useTranslation();
14-
const activeOrganization = useAppSelector((state) => state.user.activeOrganization);
15-
const { data: featureFlags, isLoading } = useGetAllFeatureFlagsQuery(undefined, {
16-
skip: !activeOrganization?.id
17-
});
18-
const [updateFeatureFlag] = useUpdateFeatureFlagMutation();
19-
20-
const handleToggleFeature = async (featureName: string, isEnabled: boolean) => {
21-
try {
22-
await updateFeatureFlag({
23-
feature_name: featureName,
24-
is_enabled: isEnabled
25-
}).unwrap();
26-
toast.success(t('settings.featureFlags.messages.updated'));
27-
} catch (error) {
28-
toast.error(t('settings.featureFlags.messages.updateFailed'));
29-
}
30-
};
15+
const { t } = useTranslation();
16+
const activeOrganization = useAppSelector((state) => state.user.activeOrganization);
17+
const { data: featureFlags, isLoading } = useGetAllFeatureFlagsQuery(undefined, {
18+
skip: !activeOrganization?.id
19+
});
20+
const [updateFeatureFlag] = useUpdateFeatureFlagMutation();
3121

32-
if (isLoading) {
33-
return <div>{t('common.loading')}</div>;
22+
const handleToggleFeature = async (featureName: string, isEnabled: boolean) => {
23+
try {
24+
await updateFeatureFlag({
25+
feature_name: featureName,
26+
is_enabled: isEnabled
27+
}).unwrap();
28+
toast.success(t('settings.featureFlags.messages.updated'));
29+
} catch (error) {
30+
toast.error(t('settings.featureFlags.messages.updateFailed'));
3431
}
32+
};
3533

36-
const getGroupedFeatures = () => {
37-
const grouped = new Map<string, FeatureFlag[]>();
38-
featureFlags?.forEach(feature => {
39-
for (const [group, features] of Object.entries(featureGroups)) {
40-
if (features.includes(feature.feature_name as FeatureName)) {
41-
if (!grouped.has(group)) {
42-
grouped.set(group, []);
43-
}
44-
grouped.get(group)?.push(feature as FeatureFlag);
45-
return;
46-
}
47-
}
48-
});
49-
return grouped;
50-
};
34+
if (isLoading) {
35+
return <div>{t('common.loading')}</div>;
36+
}
37+
38+
const getGroupedFeatures = () => {
39+
const grouped = new Map<string, FeatureFlag[]>();
40+
featureFlags?.forEach((feature) => {
41+
for (const [group, features] of Object.entries(featureGroups)) {
42+
if (features.includes(feature.feature_name as FeatureName)) {
43+
if (!grouped.has(group)) {
44+
grouped.set(group, []);
45+
}
46+
grouped.get(group)?.push(feature as FeatureFlag);
47+
return;
48+
}
49+
}
50+
});
51+
return grouped;
52+
};
5153

52-
const groupedFeatures = getGroupedFeatures();
54+
const groupedFeatures = getGroupedFeatures();
5355

54-
return (
55-
<TabsContent value="feature-flags" className="space-y-6 mt-4">
56-
<Card>
57-
<CardHeader>
58-
<CardTitle>{t('settings.featureFlags.title')}</CardTitle>
59-
<CardDescription>{t('settings.featureFlags.description')}</CardDescription>
60-
</CardHeader>
61-
<CardContent className="space-y-6">
62-
{Array.from(groupedFeatures.entries()).map(([group, features], index) => (
63-
<div key={group} className="space-y-4">
64-
<div className="space-y-2">
65-
<h3 className="text-lg font-semibold">
66-
{t(`settings.featureFlags.groups.${group}.title`)}
67-
</h3>
68-
</div>
69-
<div className="space-y-4">
70-
{features?.map((feature) => (
71-
<div key={feature.feature_name} className="flex items-center justify-between p-2 rounded-lg">
72-
<div className="space-y-1">
73-
<h4 className="text-sm font-medium">
74-
{t(`settings.featureFlags.features.${feature.feature_name}.title`)}
75-
</h4>
76-
<p className="text-sm text-muted-foreground">
77-
{t(`settings.featureFlags.features.${feature.feature_name}.description`)}
78-
</p>
79-
</div>
80-
<Switch
81-
checked={feature.is_enabled}
82-
onCheckedChange={(checked) => handleToggleFeature(feature.feature_name, checked)}
83-
/>
84-
</div>
85-
))}
86-
</div>
87-
{
88-
index !== groupedFeatures.size - 1 && (
89-
<Separator />
90-
)
91-
}
92-
</div>
93-
))}
94-
</CardContent>
95-
</Card>
96-
</TabsContent>
97-
);
98-
}
56+
return (
57+
<TabsContent value="feature-flags" className="space-y-6 mt-4">
58+
<Card>
59+
<CardHeader>
60+
<CardTitle>{t('settings.featureFlags.title')}</CardTitle>
61+
<CardDescription>{t('settings.featureFlags.description')}</CardDescription>
62+
</CardHeader>
63+
<CardContent className="space-y-6">
64+
{Array.from(groupedFeatures.entries()).map(([group, features], index) => (
65+
<div key={group} className="space-y-4">
66+
<div className="space-y-2">
67+
<h3 className="text-lg font-semibold">
68+
{t(`settings.featureFlags.groups.${group}.title`)}
69+
</h3>
70+
</div>
71+
<div className="space-y-4">
72+
{features?.map((feature) => (
73+
<div
74+
key={feature.feature_name}
75+
className="flex items-center justify-between p-2 rounded-lg"
76+
>
77+
<div className="space-y-1">
78+
<h4 className="text-sm font-medium">
79+
{t(`settings.featureFlags.features.${feature.feature_name}.title`)}
80+
</h4>
81+
<p className="text-sm text-muted-foreground">
82+
{t(`settings.featureFlags.features.${feature.feature_name}.description`)}
83+
</p>
84+
</div>
85+
<Switch
86+
checked={feature.is_enabled}
87+
onCheckedChange={(checked) =>
88+
handleToggleFeature(feature.feature_name, checked)
89+
}
90+
/>
91+
</div>
92+
))}
93+
</div>
94+
{index !== groupedFeatures.size - 1 && <Separator />}
95+
</div>
96+
))}
97+
</CardContent>
98+
</Card>
99+
</TabsContent>
100+
);
101+
}

‎view/app/settings/general/page.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -59,17 +59,19 @@ function Page() {
5959
isLoading={settingsLoading}
6060
handleUsernameChange={handleUsernameChange}
6161
user={user}
62-
userSettings={userSettings || {
63-
id: '0',
64-
user_id: '0',
65-
font_family: 'outfit',
66-
font_size: 16,
67-
language: 'en',
68-
theme: 'light',
69-
auto_update: true,
70-
created_at: new Date().toISOString(),
71-
updated_at: new Date().toISOString()
72-
}}
62+
userSettings={
63+
userSettings || {
64+
id: '0',
65+
user_id: '0',
66+
font_family: 'outfit',
67+
font_size: 16,
68+
language: 'en',
69+
theme: 'light',
70+
auto_update: true,
71+
created_at: new Date().toISOString(),
72+
updated_at: new Date().toISOString()
73+
}
74+
}
7375
isGettingUserSettings={isGettingUserSettings}
7476
isUpdatingFont={isUpdatingFont}
7577
isUpdatingTheme={isUpdatingTheme}

‎view/app/settings/hooks/use-general-settings.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,11 @@ function useGeneralSettings() {
2727
const [requestPasswordResetLink, { isLoading: isRequestingPasswordReset }] =
2828
useRequestPasswordResetLinkMutation();
2929

30-
const { data: userSettings, isLoading: isGettingUserSettings,refetch: refetchUserSettings } = useGetUserSettingsQuery();
30+
const {
31+
data: userSettings,
32+
isLoading: isGettingUserSettings,
33+
refetch: refetchUserSettings
34+
} = useGetUserSettingsQuery();
3135
const [updateFont, { isLoading: isUpdatingFont }] = useUpdateFontMutation();
3236
const [updateTheme, { isLoading: isUpdatingTheme }] = useUpdateThemeMutation();
3337
const [updateLanguage, { isLoading: isUpdatingLanguage }] = useUpdateLanguageMutation();
@@ -131,7 +135,7 @@ function useGeneralSettings() {
131135
handleThemeChange,
132136
handleLanguageChange,
133137
handleAutoUpdateChange,
134-
handleFontUpdate:handleFontChange
138+
handleFontUpdate: handleFontChange
135139
};
136140
}
137141

‎view/app/settings/notifications/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const Page: React.FC = () => {
6161
if (!isFeatureEnabled(FeatureNames.FeatureNotifications)) {
6262
return <DisabledFeature />;
6363
}
64-
64+
6565
const handleSave = (data: SMTPFormData) => {
6666
if (smtpConfigs) {
6767
if (canUpdate) {

‎view/components/features/disabled-feature.tsx‎

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,30 +5,28 @@ import { Button } from '@/components/ui/button';
55
import { Card } from '@/components/ui/card';
66

77
function DisabledFeature() {
8-
const { t } = useTranslation();
9-
return (
10-
<div className="flex h-[calc(100vh-200px)] items-center justify-center p-4">
11-
<Card className="w-full max-w-md p-6 text-center border-none">
12-
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
13-
<AlertCircle className="h-6 w-6 text-muted-foreground" />
14-
</div>
15-
<h2 className="mb-2 text-2xl font-semibold tracking-tight">
16-
{t('common.featureDisabled')}
17-
</h2>
18-
<p className="mb-6 text-sm text-muted-foreground">
19-
{t('common.featureNotAvailable')}
20-
</p>
21-
<div className="space-y-3">
22-
<Button variant="outline" className="w-full" onClick={() => window.history.back()}>
23-
{t('common.goBack')}
24-
</Button>
25-
<Button variant="ghost" className="w-full" onClick={() => window.location.reload()}>
26-
{t('common.refreshPage')}
27-
</Button>
28-
</div>
29-
</Card>
8+
const { t } = useTranslation();
9+
return (
10+
<div className="flex h-[calc(100vh-200px)] items-center justify-center p-4">
11+
<Card className="w-full max-w-md p-6 text-center border-none">
12+
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
13+
<AlertCircle className="h-6 w-6 text-muted-foreground" />
3014
</div>
31-
);
15+
<h2 className="mb-2 text-2xl font-semibold tracking-tight">
16+
{t('common.featureDisabled')}
17+
</h2>
18+
<p className="mb-6 text-sm text-muted-foreground">{t('common.featureNotAvailable')}</p>
19+
<div className="space-y-3">
20+
<Button variant="outline" className="w-full" onClick={() => window.history.back()}>
21+
{t('common.goBack')}
22+
</Button>
23+
<Button variant="ghost" className="w-full" onClick={() => window.location.reload()}>
24+
{t('common.refreshPage')}
25+
</Button>
26+
</div>
27+
</Card>
28+
</div>
29+
);
3230
}
3331

34-
export default DisabledFeature;
32+
export default DisabledFeature;

0 commit comments

Comments
 (0)