Skip to content

Commit 3d8f55c

Browse files
EnderKaranEnderKaran
committed
customers sayfasi bitti
1 parent 32da346 commit 3d8f55c

File tree

3 files changed

+200
-3
lines changed

3 files changed

+200
-3
lines changed

‎src/App.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Header from './components/Layout/Header';
55
import DashboardContent from './pages/DashboardContent';
66
import CalendarPage from './pages/CalendarPage';
77
import ProfilePage from './pages/ProfilePage';
8+
import CustomersPage from './pages/CustomersPage'; // YENİ
89
import './App.css';
910

1011
function App() {
@@ -37,11 +38,11 @@ function App() {
3738
{isSidebarOpen && (
3839
<div
3940
onClick={() => setSidebarOpen(false)}
40-
className="fixed inset-0 bg-black/50 z-20 md:hidden"
41+
className="fixed inset-0 z-20 bg-black/50 md:hidden"
4142
></div>
4243
)}
4344

44-
<div className='flex-1 flex flex-col overflow-hidden'>
45+
<div className='flex flex-col flex-1 overflow-hidden'>
4546
<Header
4647
setSidebarOpen={setSidebarOpen}
4748
theme={theme}
@@ -56,7 +57,7 @@ function App() {
5657
<Route path="/dashboard" element={<DashboardContent theme={theme} />} />
5758

5859
<Route path="/calendar" element={<CalendarPage theme={theme} />} />
59-
<Route path="/customers" element={<div>Customers Page</div>} />
60+
<Route path="/customers" element={<CustomersPage theme={theme} />} />
6061
<Route path="/orders" element={<div>Orders Page</div>} />
6162
<Route path="/analytics" element={<div>Analytics Page</div>} />
6263
<Route path="/settings" element={<div>Settings Page</div>} />

‎src/components/Tables/CustomersTable.jsx‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
import React from 'react';
2+
import { MoreVertical, Search, Filter } from 'lucide-react';
3+
4+
// Sahte (mock) müşteri verisi
5+
const customersData = [
6+
{
7+
id: 1,
8+
avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
9+
name: 'Terry Franci',
10+
email: 'terry.franci@example.com',
11+
phone: '(201) 555-0123',
12+
status: 'Active',
13+
totalSpent: '$2,450.80',
14+
orders: 12,
15+
},
16+
{
17+
id: 2,
18+
avatar: 'https://randomuser.me/api/portraits/women/44.jpg',
19+
name: 'Alena Franci',
20+
email: 'alena.franci@example.com',
21+
phone: '(202) 555-0145',
22+
status: 'Active',
23+
totalSpent: '$1,820.00',
24+
orders: 8,
25+
},
26+
{
27+
id: 3,
28+
avatar: 'https://randomuser.me/api/portraits/women/67.jpg',
29+
name: 'Jocelyn Kenter',
30+
email: 'jocelyn.kenter@example.com',
31+
phone: '(203) 555-0167',
32+
status: 'Banned',
33+
totalSpent: '$350.50',
34+
orders: 2,
35+
},
36+
{
37+
id: 4,
38+
avatar: 'https://randomuser.me/api/portraits/men/1.jpg',
39+
name: 'Brandon Philips',
40+
email: 'brandon.philips@example.com',
41+
phone: '(204) 555-0189',
42+
status: 'Active',
43+
totalSpent: '$5,120.00',
44+
orders: 25,
45+
},
46+
{
47+
id: 5,
48+
avatar: 'https://randomuser.me/api/portraits/women/79.jpg',
49+
name: 'Mara Vit',
50+
email: 'mara.vit@example.com',
51+
phone: '(205) 555-0110',
52+
status: 'Idle',
53+
totalSpent: '$890.20',
54+
orders: 5,
55+
},
56+
];
57+
58+
const statusColors = {
59+
Active: 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400',
60+
Banned: 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400',
61+
Idle: 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-400',
62+
};
63+
64+
function CustomersTable({ isDark }) {
65+
return (
66+
<div className={`p-6 rounded-xl border shadow-sm transition-colors duration-300 ${
67+
isDark
68+
? 'bg-slate-800 border-slate-700/50'
69+
: 'bg-white border-slate-200/50'
70+
}`}>
71+
{/* Tablo Başlığı ve Filtreler */}
72+
<div className="flex flex-col items-center justify-between gap-4 mb-4 md:flex-row">
73+
<h3 className={`font-bold text-lg ${isDark ? 'text-white' : 'text-slate-800'}`}>All Customers</h3>
74+
<div className="flex items-center w-full space-x-2 md:w-auto">
75+
<div className="relative w-full md:w-64">
76+
<Search className={`w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 ${isDark ? 'text-slate-500' : 'text-slate-400'}`} />
77+
<input
78+
type="text"
79+
placeholder="Search customer..."
80+
className={`w-full pl-10 pr-4 py-2 text-sm rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all ${
81+
isDark
82+
? 'bg-slate-700 border-slate-600 text-white placeholder-slate-500'
83+
: 'bg-slate-100 border-transparent text-slate-800 placeholder-slate-400'
84+
}`}
85+
/>
86+
</div>
87+
<button className={`flex items-center space-x-2 px-3 py-2 text-sm rounded-md border transition-colors ${isDark ? 'border-slate-600 text-slate-300 hover:bg-slate-700' : 'border-slate-300 text-slate-600 hover:bg-slate-100'}`}>
88+
<Filter size={14} />
89+
<span>Filter</span>
90+
</button>
91+
</div>
92+
</div>
93+
94+
{/* Müşteri Listesi - Tablo */}
95+
<div className="overflow-x-auto">
96+
<div className="min-w-[800px]">
97+
{/* Tablo Başlıkları */}
98+
<div className={`grid grid-cols-12 gap-4 px-4 py-2 text-xs font-semibold uppercase ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>
99+
<div className="col-span-3">Customer</div>
100+
<div className="col-span-3">Email</div>
101+
<div className="col-span-2">Phone</div>
102+
<div className="col-span-1">Orders</div>
103+
<div className="col-span-2">Total Spent</div>
104+
<div className="col-span-1 text-center">Status</div>
105+
</div>
106+
107+
{/* Müşteri Öğeleri */}
108+
{customersData.map((customer) => (
109+
<div key={customer.id} className={`grid grid-cols-12 gap-4 items-center p-4 rounded-lg transition-colors text-sm ${isDark ? 'hover:bg-slate-700/50 text-slate-300' : 'hover:bg-slate-50 text-slate-700'}`}>
110+
111+
{/* Müşteri */}
112+
<div className="flex items-center col-span-3 space-x-3">
113+
<img src={customer.avatar} alt={customer.name} className="rounded-full w-9 h-9" />
114+
<span className={`font-semibold ${isDark ? 'text-white' : 'text-slate-800'}`}>{customer.name}</span>
115+
</div>
116+
117+
{/* Email */}
118+
<div className="col-span-3">{customer.email}</div>
119+
120+
{/* Phone */}
121+
<div className="col-span-2">{customer.phone}</div>
122+
123+
{/* Orders */}
124+
<div className="col-span-1">{customer.orders}</div>
125+
126+
{/* Total Spent */}
127+
<div className={`col-span-2 font-medium ${isDark ? 'text-slate-200' : 'text-slate-600'}`}>
128+
{customer.totalSpent}
129+
</div>
130+
131+
{/* Status */}
132+
<div className="flex justify-center col-span-1">
133+
<span className={`px-2 py-0.5 text-xs font-semibold rounded-full ${statusColors[customer.status]}`}>
134+
{customer.status}
135+
</span>
136+
</div>
137+
</div>
138+
))}
139+
</div>
140+
</div>
141+
142+
{/* Sayfalama (Pagination) */}
143+
<div className="flex items-center justify-between pt-4 mt-4 border-t">
144+
<span className={`text-sm ${isDark ? 'text-slate-400' : 'text-slate-600'}`}>
145+
Showing 1-5 of 5 customers
146+
</span>
147+
<div className="flex items-center space-x-1">
148+
<button className={`px-2.5 py-1 text-sm rounded-md ${isDark ? 'text-slate-500' : 'text-slate-400'}`}>Previous</button>
149+
<button className={`px-2.5 py-1 text-sm rounded-md ${isDark ? 'bg-slate-700 text-white' : 'bg-indigo-600 text-white'}`}>1</button>
150+
<button className={`px-2.5 py-1 text-sm rounded-md ${isDark ? 'text-slate-300 hover:bg-slate-700' : 'text-slate-600 hover:bg-slate-100'}`}>Next</button>
151+
</div>
152+
</div>
153+
</div>
154+
);
155+
}
156+
157+
export default CustomersTable;

‎src/pages/CustomersPage.jsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
import StatCard from '../components/StatCard';
3+
import CustomersTable from '../components/Tables/CustomersTable';
4+
import { Users, UserCheck, UserX } from 'lucide-react';
5+
6+
function CustomersPage({ theme }) {
7+
const isDark = theme === 'dark';
8+
9+
return (
10+
<main className={`flex-1 p-4 sm:p-6 md:p-8 overflow-y-auto transition-all duration-300 ${
11+
isDark ? 'bg-slate-900' : 'bg-slate-50'
12+
}`}>
13+
{/* Sayfa Başlığı ve Breadcrumb */}
14+
<div className="flex items-center justify-between mb-8">
15+
<h1 className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-slate-800'}`}>
16+
Customers
17+
</h1>
18+
<div className={`text-sm ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>
19+
<span className="cursor-pointer hover:text-indigo-500">Home</span>
20+
<span className="mx-2">&gt;</span>
21+
<span>Customers</span>
22+
</div>
23+
</div>
24+
25+
{/* İstatistik Kartları */}
26+
<div className="grid grid-cols-1 gap-6 mb-8 md:grid-cols-2 lg:grid-cols-3">
27+
<StatCard title="Total Customers" value="12,500" change="+12.5%" changeType="positive" isDark={isDark} />
28+
<StatCard title="New Customers (Month)" value="320" change="+8.2%" changeType="positive" isDark={isDark} />
29+
<StatCard title="Active Customers" value="10,840" change="-1.1%" changeType="negative" isDark={isDark} />
30+
</div>
31+
32+
{/* Müşteri Tablosu */}
33+
<CustomersTable isDark={isDark} />
34+
35+
</main>
36+
);
37+
}
38+
39+
export default CustomersPage;

0 commit comments

Comments
 (0)