new-marketplace

1
/* eslint-disable @next/next/no-img-element */
2
'use client';
3
import { Button } from 'primereact/button';
4
import { Chart } from 'primereact/chart';
5
import { Column } from 'primereact/column';
6
import { DataTable } from 'primereact/datatable';
7
import { Menu } from 'primereact/menu';
8
import React, { useContext, useEffect, useRef, useState } from 'react';
9
import { ProductService } from '../../demo/service/ProductService';
10
import { LayoutContext } from '../../layout/context/layoutcontext';
11
import Link from 'next/link';
12
import { Demo } from '@/types';
13
import { ChartData, ChartOptions } from 'chart.js';
14

15
const lineData: ChartData = {
16
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
17
    datasets: [
18
        {
19
            label: 'First Dataset',
20
            data: [65, 59, 80, 81, 56, 55, 40],
21
            fill: false,
22
            backgroundColor: '#2f4860',
23
            borderColor: '#2f4860',
24
            tension: 0.4
25
        },
26
        {
27
            label: 'Second Dataset',
28
            data: [28, 48, 40, 19, 86, 27, 90],
29
            fill: false,
30
            backgroundColor: '#00bb7e',
31
            borderColor: '#00bb7e',
32
            tension: 0.4
33
        }
34
    ]
35
};
36

37
const Dashboard = () => {
38
    const [products, setProducts] = useState<Demo.Product[]>([]);
39
    const menu1 = useRef<Menu>(null);
40
    const menu2 = useRef<Menu>(null);
41
    const [lineOptions, setLineOptions] = useState<ChartOptions>({});
42
    const { layoutConfig } = useContext(LayoutContext);
43

44
    const applyLightTheme = () => {
45
        const lineOptions: ChartOptions = {
46
            plugins: {
47
                legend: {
48
                    labels: {
49
                        color: '#495057'
50
                    }
51
                }
52
            },
53
            scales: {
54
                x: {
55
                    ticks: {
56
                        color: '#495057'
57
                    },
58
                    grid: {
59
                        color: '#ebedef'
60
                    }
61
                },
62
                y: {
63
                    ticks: {
64
                        color: '#495057'
65
                    },
66
                    grid: {
67
                        color: '#ebedef'
68
                    }
69
                }
70
            }
71
        };
72

73
        setLineOptions(lineOptions);
74
    };
75

76
    const applyDarkTheme = () => {
77
        const lineOptions = {
78
            plugins: {
79
                legend: {
80
                    labels: {
81
                        color: '#ebedef'
82
                    }
83
                }
84
            },
85
            scales: {
86
                x: {
87
                    ticks: {
88
                        color: '#ebedef'
89
                    },
90
                    grid: {
91
                        color: 'rgba(160, 167, 181, .3)'
92
                    }
93
                },
94
                y: {
95
                    ticks: {
96
                        color: '#ebedef'
97
                    },
98
                    grid: {
99
                        color: 'rgba(160, 167, 181, .3)'
100
                    }
101
                }
102
            }
103
        };
104

105
        setLineOptions(lineOptions);
106
    };
107

108
    useEffect(() => {
109
        ProductService.getProductsSmall().then((data) => setProducts(data));
110
    }, []);
111

112
    useEffect(() => {
113
        if (layoutConfig.colorScheme === 'light') {
114
            applyLightTheme();
115
        } else {
116
            applyDarkTheme();
117
        }
118
    }, [layoutConfig.colorScheme]);
119

120
    const formatCurrency = (value: number) => {
121
        return value?.toLocaleString('en-US', {
122
            style: 'currency',
123
            currency: 'USD'
124
        });
125
    };
126

127
    return (
128
        <div className="grid">
129
            <div className="col-12 lg:col-6 xl:col-3">
130
                <div className="card mb-0">
131
                    <div className="flex justify-content-between mb-3">
132
                        <div>
133
                            <span className="block text-500 font-medium mb-3">Покупки</span>
134
                            <div className="text-900 font-medium text-xl">152</div>
135
                        </div>
136
                        <div className="flex align-items-center justify-content-center bg-blue-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
137
                            <i className="pi pi-shopping-cart text-blue-500 text-xl" />
138
                        </div>
139
                    </div>
140
                    <span className="text-green-500 font-medium">24 новые </span>
141
                    <span className="text-500">за последний визит</span>
142
                </div>
143
            </div>
144
            <div className="col-12 lg:col-6 xl:col-3">
145
                <div className="card mb-0">
146
                    <div className="flex justify-content-between mb-3">
147
                        <div>
148
                            <span className="block text-500 font-medium mb-3">Доход</span>
149
                            <div className="text-900 font-medium text-xl">$2.100</div>
150
                        </div>
151
                        <div className="flex align-items-center justify-content-center bg-orange-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
152
                            <i className="pi pi-map-marker text-orange-500 text-xl" />
153
                        </div>
154
                    </div>
155
                    <span className="text-green-500 font-medium">%52+ </span>
156
                    <span className="text-500">за последнюю неделю</span>
157
                </div>
158
            </div>
159
            <div className="col-12 lg:col-6 xl:col-3">
160
                <div className="card mb-0">
161
                    <div className="flex justify-content-between mb-3">
162
                        <div>
163
                            <span className="block text-500 font-medium mb-3">Заказчики</span>
164
                            <div className="text-900 font-medium text-xl">28441</div>
165
                        </div>
166
                        <div className="flex align-items-center justify-content-center bg-cyan-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
167
                            <i className="pi pi-inbox text-cyan-500 text-xl" />
168
                        </div>
169
                    </div>
170
                    <span className="text-green-500 font-medium">520 </span>
171
                    <span className="text-500">новые регистрации</span>
172
                </div>
173
            </div>
174
            <div className="col-12 lg:col-6 xl:col-3">
175
                <div className="card mb-0">
176
                    <div className="flex justify-content-between mb-3">
177
                        <div>
178
                            <span className="block text-500 font-medium mb-3">Комментарии</span>
179
                            <div className="text-900 font-medium text-xl">152 Непрочитанные</div>
180
                        </div>
181
                        <div className="flex align-items-center justify-content-center bg-purple-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
182
                            <i className="pi pi-comment text-purple-500 text-xl" />
183
                        </div>
184
                    </div>
185
                    <span className="text-green-500 font-medium">85 </span>
186
                    <span className="text-500">ответы</span>
187
                </div>
188
            </div>
189

190
            <div className="col-12 xl:col-6">
191
                <div className="card">
192
                    <h5>Недавние продажи</h5>
193
                    <DataTable value={products} rows={5} paginator responsiveLayout="scroll">
194
                        <Column header="Изображение" body={(data) => <img className="shadow-2" src={`/demo/images/product/${data.image}`} alt={data.image} width="50" />} />
195
                        <Column field="name" header="Название" sortable style={{ width: '35%' }} />
196
                        <Column field="price" header="Цена" sortable style={{ width: '35%' }} body={(data) => formatCurrency(data.price)} />
197
                        <Column
198
                            header="Просмотр"
199
                            style={{ width: '15%' }}
200
                            body={() => (
201
                                <>
202
                                    <Button icon="pi pi-search" text />
203
                                </>
204
                            )}
205
                        />
206
                    </DataTable>
207
                </div>
208
            </div>
209

210
            <div className="col-12 xl:col-6">
211
                <div className="card">
212
                    <div className="flex justify-content-between align-items-center mb-5">
213
                        <h5>Самые продаваемые продукты</h5>
214
                        <div>
215
                            <Button type="button" icon="pi pi-ellipsis-v" rounded text className="p-button-plain" onClick={(event) => menu1.current?.toggle(event)} />
216
                            <Menu
217
                                ref={menu1}
218
                                popup
219
                                model={[
220
                                    { label: 'Add New', icon: 'pi pi-fw pi-plus' },
221
                                    { label: 'Remove', icon: 'pi pi-fw pi-minus' }
222
                                ]}
223
                            />
224
                        </div>
225
                    </div>
226
                    <ul className="list-none p-0 m-0">
227
                        <li className="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
228
                            <div>
229
                                <span className="text-900 font-medium mr-2 mb-1 md:mb-0">Space T-Shirt</span>
230
                                <div className="mt-1 text-600">Одежда</div>
231
                            </div>
232
                            <div className="mt-2 md:mt-0 flex align-items-center">
233
                                <div className="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" style={{ height: '8px' }}>
234
                                    <div className="bg-orange-500 h-full" style={{ width: '50%' }} />
235
                                </div>
236
                                <span className="text-orange-500 ml-3 font-medium">%50</span>
237
                            </div>
238
                        </li>
239
                        <li className="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
240
                            <div>
241
                                <span className="text-900 font-medium mr-2 mb-1 md:mb-0">Portal Sticker</span>
242
                                <div className="mt-1 text-600">Аксессуары</div>
243
                            </div>
244
                            <div className="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
245
                                <div className="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" style={{ height: '8px' }}>
246
                                    <div className="bg-cyan-500 h-full" style={{ width: '16%' }} />
247
                                </div>
248
                                <span className="text-cyan-500 ml-3 font-medium">%16</span>
249
                            </div>
250
                        </li>
251
                        <li className="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
252
                            <div>
253
                                <span className="text-900 font-medium mr-2 mb-1 md:mb-0">Supernova Sticker</span>
254
                                <div className="mt-1 text-600">Аксессуары</div>
255
                            </div>
256
                            <div className="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
257
                                <div className="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" style={{ height: '8px' }}>
258
                                    <div className="bg-pink-500 h-full" style={{ width: '67%' }} />
259
                                </div>
260
                                <span className="text-pink-500 ml-3 font-medium">%67</span>
261
                            </div>
262
                        </li>
263
                        <li className="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
264
                            <div>
265
                                <span className="text-900 font-medium mr-2 mb-1 md:mb-0">Wonders Notebook</span>
266
                                <div className="mt-1 text-600">Оффис</div>
267
                            </div>
268
                            <div className="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
269
                                <div className="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" style={{ height: '8px' }}>
270
                                    <div className="bg-green-500 h-full" style={{ width: '35%' }} />
271
                                </div>
272
                                <span className="text-green-500 ml-3 font-medium">%35</span>
273
                            </div>
274
                        </li>
275
                        <li className="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
276
                            <div>
277
                                <span className="text-900 font-medium mr-2 mb-1 md:mb-0">Mat Black Case</span>
278
                                <div className="mt-1 text-600">Аксессуары</div>
279
                            </div>
280
                            <div className="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
281
                                <div className="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" style={{ height: '8px' }}>
282
                                    <div className="bg-purple-500 h-full" style={{ width: '75%' }} />
283
                                </div>
284
                                <span className="text-purple-500 ml-3 font-medium">%75</span>
285
                            </div>
286
                        </li>
287
                        <li className="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
288
                            <div>
289
                                <span className="text-900 font-medium mr-2 mb-1 md:mb-0">Robots T-Shirt</span>
290
                                <div className="mt-1 text-600">Одежда</div>
291
                            </div>
292
                            <div className="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
293
                                <div className="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" style={{ height: '8px' }}>
294
                                    <div className="bg-teal-500 h-full" style={{ width: '40%' }} />
295
                                </div>
296
                                <span className="text-teal-500 ml-3 font-medium">%40</span>
297
                            </div>
298
                        </li>
299
                    </ul>
300
                </div>
301
            </div>
302
        </div>
303
    );
304
};
305

306
export default Dashboard;
307