Skip to content

Commit 3430d9d

Browse files
am9zZWYam9zZWY
committed
Improve UI for client and have almost complete translation
1 parent 37feadc commit 3430d9d

26 files changed

Lines changed: 834 additions & 519 deletions

File tree

‎src/app/WithSystemCheck.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const WithSystemCheck = <P extends object>(
1818
const { data, error, isFetching } = useSystem()
1919

2020
if (isFetching) {
21-
return <Loading message={t('withsystemcheck.check_system_status')}/>
21+
return <Loading message={t('SystemCheck.check_system_status')}/>
2222
}
2323

2424
if (error) {
@@ -40,11 +40,11 @@ const WithSystemCheck = <P extends object>(
4040
<Construction className="w-4 h-4 text-red-400"/>
4141
</div>
4242
<h1 className="text-2xl font-semibold text-gray-900">
43-
{t('withsystemcheck.system_inactive')}
43+
{t('SystemCheck.system_inactive')}
4444
</h1>
4545
</div>
4646
<p className="text-gray-500 text-md">
47-
{data.status.message ?? t('withsystemcheck.system_unavailable_message')}
47+
{data.status.message ?? t('SystemCheck.system_unavailable_message')}
4848
</p>
4949
</div>
5050
)

‎src/app/admin/manage/database/page.tsx‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,11 @@ export default function ManagePage() {
5757
if (data) {
5858
if (data.status.message) {
5959
setMessage(data.status.message);
60+
setSystemMessage(data.status.message);
6061
} else if (data.status.active) {
61-
setMessage('Active System');
62+
setMessage(t('Admin.Manage.Database.Status.activeSystem'));
6263
} else {
63-
setMessage('Inactive System');
64+
setMessage(t('Admin.Manage.Database.Status.disabledSystem'));
6465
}
6566
setConfigData(JSON.stringify(data.config, null, 2));
6667
}
@@ -81,7 +82,7 @@ export default function ManagePage() {
8182
};
8283

8384
if (isFetching) {
84-
return <Loading message={t('withsystemcheck.check_system_status')}/>
85+
return <Loading message={t('SystemCheck.check_system_status')}/>
8586
}
8687

8788
if (error) {
@@ -95,7 +96,7 @@ export default function ManagePage() {
9596
return (
9697
<div className="min-h-screen">
9798
<Heading
98-
title={t('admin.manage.database.title')}
99+
title={t('Admin.Manage.Database.title')}
99100
description={message}
100101
icon={<Database className="size-10 text-blue-600"/>}
101102
/>
@@ -104,15 +105,15 @@ export default function ManagePage() {
104105
<div className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
105106
<div className="bg-gradient-to-r from-primary-50 to-primary-100 px-6 py-4 border-b border-gray-200">
106107
<h2 className="text-xl font-semibold text-gray-900">
107-
System Controls
108+
{t('Admin.Manage.Database.SystemControls.title')}
108109
</h2>
109110
</div>
110111
<div className="p-6 space-y-6">
111112
{/* Enable Changes Toggle */}
112113
<div
113114
className="flex items-center gap-4 p-4 bg-slate-50/50 rounded-2xl border border-slate-200/50">
114115
<label htmlFor="enableChanges" className="text-sm font-medium text-slate-700 flex-1">
115-
{t('admin.manage.database.enable_changes')}
116+
{t('Admin.Manage.Database.Actions.enable_changes')}
116117
</label>
117118
<div className="relative">
118119
<input
@@ -133,7 +134,7 @@ export default function ManagePage() {
133134
className="inline-flex items-center justify-center gap-2 rounded-2xl px-6 py-3 text-sm font-medium transition-all duration-200 bg-slate-200 text-slate-700 hover:bg-slate-300 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-slate-200"
134135
disabled={!enableChanges}
135136
>
136-
{t('admin.manage.database.reset_database')}
137+
{t('Admin.Manage.Database.Actions.reset_database')}
137138
</Button>
138139

139140
{data && (
@@ -150,7 +151,7 @@ export default function ManagePage() {
150151
>
151152
<div
152153
className={`size-2 rounded-full ${data.status.active ? 'bg-white' : 'bg-slate-500'}`}/>
153-
{data.status.active ? 'Active System' : 'Inactive System'}
154+
{data.status.active ? t('Admin.Manage.Database.Status.activeSystem') : t('Admin.Manage.Database.Status.disabledSystem')}
154155
</Button>
155156
)}
156157
</div>
@@ -159,15 +160,16 @@ export default function ManagePage() {
159160
{data && (
160161
<div className="space-y-3">
161162
<label htmlFor="systemMessage" className="block text-sm font-medium text-slate-700">
162-
System Message
163+
{t('Admin.Manage.Database.SystemMessage.title')}
163164
</label>
164165
<div className="grid grid-cols-3 gap-4">
165166
<div className="relative col-span-2">
166167
<input
167168
type="text"
168169
id="systemMessage"
169170
name="systemMessage"
170-
placeholder="Enter system message..."
171+
value={systemMessage}
172+
placeholder={t('Admin.Manage.Database.Actions.enterSystemMessage')}
171173
className="w-full px-4 py-3 pl-11 text-sm bg-white border border-slate-300 rounded-2xl shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 hover:border-slate-400 placeholder-slate-400"
172174
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSystemMessage(e.target.value)}
173175
/>
@@ -191,11 +193,11 @@ export default function ManagePage() {
191193
}}
192194
>
193195
<div className="size-2 rounded-full"/>
194-
Set
196+
{t('Admin.Manage.Database.Actions.set')}
195197
</Button>
196198
</div>
197199
<p className="text-xs text-slate-500">
198-
This message will be displayed to users when the system status changes.
200+
{t('Admin.Manage.Database.SystemMessage.disclaimer')}
199201
</p>
200202
</div>
201203
)}
@@ -205,13 +207,13 @@ export default function ManagePage() {
205207
<div className="p-6 space-y-6">
206208
<div className="flex items-center justify-between">
207209
<h3 className="text-lg font-semibold text-slate-800 border-b border-slate-200 pb-2 flex-1">
208-
Configuration Editor
210+
{t('Admin.Manage.Database.ConfigurationEditor.title')}
209211
</h3>
210212
<Button
211213
onClick={saveConfig}
212214
className="inline-flex items-center gap-2 rounded-2xl px-4 py-2 text-xs font-medium transition-all duration-200 bg-blue-600 text-white hover:bg-blue-700 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
213215
>
214-
Save Config
216+
{t('Admin.Manage.Database.Actions.saveConfig')}
215217
</Button>
216218
</div>
217219

@@ -232,8 +234,7 @@ export default function ManagePage() {
232234
</div>
233235

234236
<div className="text-xs text-slate-500 bg-slate-50 p-3 rounded-xl border border-slate-200">
235-
<strong>Note:</strong> This configuration is editable JSON data. Make sure to maintain valid
236-
JSON syntax when making changes.
237+
{t('Admin.Manage.Database.ConfigurationEditor.disclaimer')}
237238
</div>
238239
</div>
239240
</div>

‎src/app/admin/manage/pizza/EditItem.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ const EditItem = ({ item, isNew }: EditItemProps) => {
107107
? 'bg-green-100 text-green-800'
108108
: 'bg-red-100 text-red-800'
109109
}`}>
110-
{localItem.enabled ? '✓ Enabled' : '✕ Disabled'}
110+
{localItem.enabled ? t('Admin.Manage.Items.Status.enabled') : t('Admin.Manage.Items.Status.disabled')}
111111
</span>
112112
<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-primary-100 text-primary-800">
113113
€{localItem.price.toFixed(2)}
@@ -133,7 +133,7 @@ const EditItem = ({ item, isNew }: EditItemProps) => {
133133
<div className="space-y-4">
134134
<div>
135135
<label className="block text-sm font-medium text-gray-700 mb-2">
136-
{t('admin.manage.pizza.edit_item.name')}
136+
{t('Admin.Manage.Items.Property.name')}
137137
</label>
138138
<input
139139
type="text"
@@ -146,7 +146,7 @@ const EditItem = ({ item, isNew }: EditItemProps) => {
146146

147147
<div>
148148
<label className="block text-sm font-medium text-gray-700 mb-2">
149-
{t('admin.manage.pizza.edit_item.type')}
149+
{t('Admin.Manage.Items.Property.type')}
150150
</label>
151151
<input
152152
type="text"
@@ -159,11 +159,11 @@ const EditItem = ({ item, isNew }: EditItemProps) => {
159159

160160
<div>
161161
<label className="block text-sm font-medium text-gray-700 mb-2">
162-
{t('admin.manage.pizza.edit_item.dietary')}
162+
{t('Admin.Manage.Items.Property.dietary')}
163163
</label>
164164
<input
165165
type="text"
166-
value={localItem.dietary || ''}
166+
value={localItem.dietary ?? ''}
167167
onChange={(e) => updateItem({ dietary: e.target.value })}
168168
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors"
169169
placeholder="e.g., Vegan, Vegetarian, Gluten Free"
@@ -181,7 +181,7 @@ const EditItem = ({ item, isNew }: EditItemProps) => {
181181
<div className="space-y-4">
182182
<div>
183183
<label className="block text-sm font-medium text-gray-700 mb-2">
184-
{t('admin.manage.pizza.edit_item.price')}
184+
{t('Admin.Manage.Items.Property.price')}
185185
</label>
186186
<div className="relative">
187187
<input
@@ -199,7 +199,7 @@ const EditItem = ({ item, isNew }: EditItemProps) => {
199199

200200
<div>
201201
<label className="block text-sm font-medium text-gray-700 mb-2">
202-
Size
202+
{t('Admin.Manage.Items.Property.size')}
203203
</label>
204204
<input
205205
type="number"
@@ -222,7 +222,7 @@ const EditItem = ({ item, isNew }: EditItemProps) => {
222222
className="w-5 h-5 text-primary-600 border-gray-300 rounded focus:ring-primary-500"
223223
/>
224224
<span className="text-sm font-medium text-gray-700">
225-
Item is available for ordering
225+
{t('Admin.Manage.Items.Status.itemIsAvailable')}
226226
</span>
227227
</label>
228228
</div>
@@ -236,7 +236,7 @@ const EditItem = ({ item, isNew }: EditItemProps) => {
236236
<div className="bg-gray-50 px-6 py-4 border-t border-gray-200">
237237
<div className="flex items-center justify-between">
238238
<div className="text-sm text-gray-500">
239-
{isNew ? 'Ready to add this item?' : 'Save your changes'}
239+
{isNew ? t('Admin.Manage.Items.readyToCreate') : t('Admin.Manage.Items.saveChanges')}
240240
</div>
241241
<div className="flex items-center space-x-3">
242242
{!isNew && (
@@ -245,7 +245,7 @@ const EditItem = ({ item, isNew }: EditItemProps) => {
245245
disabled={isLoading}
246246
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors disabled:opacity-50"
247247
>
248-
{localItem.enabled ? 'Disable' : 'Enable'}
248+
{localItem.enabled ? t('Admin.Manage.Items.Actions.disable') : t('Admin.Manage.Items.Actions.enable')}
249249
</Button>
250250
)}
251251
<Button
@@ -259,7 +259,7 @@ const EditItem = ({ item, isNew }: EditItemProps) => {
259259
<span>{isNew ? 'Creating...' : 'Saving...'}</span>
260260
</div>
261261
) : (
262-
isNew ? t('admin.manage.pizza.edit_item.create') : t('admin.manage.pizza.edit_item.update')
262+
isNew ? t('Admin.Manage.Items.Actions.create') : t('Admin.Manage.Items.Actions.update')
263263
)}
264264
</Button>
265265
</div>

‎src/app/admin/manage/pizza/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const Page = () => {
2828

2929
return (
3030
<div>
31-
<Heading title={t('admin.manage.pizza.title')} description={t('admin.manage.pizza.subtitle')}
31+
<Heading title={t('Admin.Manage.Items.title')} description={t('Admin.Manage.Items.subtitle')}
3232
icon={<Wrench className="w-10 h-10 text-gray-900"/>}/>
3333

3434
{/* New Item */}

0 commit comments

Comments
 (0)