Skip to content

Commit 85a2a24

Browse files
EnderKaranEnderKaran
committed
analytics sayfasi yapildi , gerekli düzenlemeler yapildi
1 parent 3d8f55c commit 85a2a24

File tree

8 files changed

+737
-463
lines changed

8 files changed

+737
-463
lines changed

‎src/App.jsx‎

Lines changed: 67 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -2,73 +2,83 @@ import { useState, useEffect } from 'react';
22
import { Routes, Route } from 'react-router-dom';
33
import Sidebar from './components/Layout/Sidebar';
44
import Header from './components/Layout/Header';
5+
6+
// Oluşturulan sayfaları import et
57
import DashboardContent from './pages/DashboardContent';
68
import CalendarPage from './pages/CalendarPage';
79
import ProfilePage from './pages/ProfilePage';
8-
import CustomersPage from './pages/CustomersPage'; // YENİ
10+
import CustomersPage from './pages/CustomersPage';
11+
import OrdersPage from './pages/OrdersPage';
12+
import AnalyticsPage from './pages/AnalyticsPage';
13+
914
import './App.css';
1015

1116
function App() {
12-
const [isSidebarOpen, setSidebarOpen] = useState(false);
17+
  const [isSidebarOpen, setSidebarOpen] = useState(false);
18+
 
19+
 
20+
  const [theme, setTheme] = useState(() => {
21+
    const savedTheme = localStorage.getItem('theme');
22+
    if (savedTheme) return savedTheme;
23+
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
24+
  });
1325

14-
15-
const [theme, setTheme] = useState(() => {
16-
const savedTheme = localStorage.getItem('theme');
17-
if (savedTheme) return savedTheme;
18-
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
19-
});
26+
// isDark değişkenini burada da tanımla
27+
const isDark = theme === 'dark';
2028

21-
const toggleTheme = () => {
22-
setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
23-
};
29+
  const toggleTheme = () => {
30+
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
31+
  };
2432

25-
useEffect(() => {
26-
const root = window.document.documentElement;
27-
root.classList.remove('light', 'dark');
28-
root.classList.add(theme);
29-
localStorage.setItem('theme', theme);
30-
}, [theme]);
33+
  useEffect(() => {
34+
    const root = window.document.documentElement;
35+
    root.classList.remove('light', 'dark');
36+
    root.classList.add(theme);
37+
    localStorage.setItem('theme', theme);
38+
  }, [theme]);
3139

32-
return (
33-
34-
<div className='min-h-screen'>
35-
<div className='flex h-screen overflow-hidden'>
36-
<Sidebar isSidebarOpen={isSidebarOpen} theme={theme} toggleTheme={toggleTheme} />
37-
38-
{isSidebarOpen && (
39-
<div
40-
onClick={() => setSidebarOpen(false)}
41-
className="fixed inset-0 z-20 bg-black/50 md:hidden"
42-
></div>
43-
)}
40+
  return (
41+
   
42+
    <div className='min-h-screen'>
43+
      <div className='flex h-screen overflow-hidden'>
44+
        <Sidebar isSidebarOpen={isSidebarOpen} theme={theme} toggleTheme={toggleTheme} />
45+
       
46+
        {isSidebarOpen && (
47+
          <div
48+
            onClick={() => setSidebarOpen(false)}
49+
            className="fixed inset-0 z-20 bg-black/50 md:hidden"
50+
          ></div>
51+
        )}
4452

45-
<div className='flex flex-col flex-1 overflow-hidden'>
46-
<Header
47-
setSidebarOpen={setSidebarOpen}
48-
theme={theme}
49-
toggleTheme={toggleTheme}
50-
/>
51-
52-
53-
<main className="flex-1 overflow-y-auto">
54-
<Routes>
55-
56-
<Route path="/" element={<DashboardContent theme={theme} />} />
57-
<Route path="/dashboard" element={<DashboardContent theme={theme} />} />
58-
59-
<Route path="/calendar" element={<CalendarPage theme={theme} />} />
60-
<Route path="/customers" element={<CustomersPage theme={theme} />} />
61-
<Route path="/orders" element={<div>Orders Page</div>} />
62-
<Route path="/analytics" element={<div>Analytics Page</div>} />
63-
<Route path="/settings" element={<div>Settings Page</div>} />
64-
<Route path="/profile" element={<ProfilePage theme={theme} />} />
65-
</Routes>
66-
</main>
67-
68-
</div>
69-
</div>
70-
</div>
71-
);
53+
        <div className='flex flex-col flex-1 overflow-hidden'>
54+
          <Header
55+
            setSidebarOpen={setSidebarOpen}
56+
            theme={theme}
57+
            toggleTheme={toggleTheme}
58+
          />
59+
         
60+
         
61+
          {/* GÜNCELLENDİ: Ana <main> etiketi artık arka plan rengini ve padding'i buradan alıyor */}
62+
          <main className={`flex-1 overflow-y-auto p-4 sm:p-6 md:p-8 transition-colors duration-300 ${
63+
isDark ? 'bg-slate-900' : 'bg-slate-50'
64+
}`}>
65+
            <Routes>
66+
              <Route path="/" element={<DashboardContent theme={theme} />} />
67+
              <Route path="/dashboard" element={<DashboardContent theme={theme} />} />
68+
              <Route path="/calendar" element={<CalendarPage theme={theme} />} />
69+
              <Route path="/customers" element={<CustomersPage theme={theme} />} />
70+
              <Route path="/orders" element={<OrdersPage theme={theme} />} />
71+
              <Route path="/analytics" element={<AnalyticsPage theme={theme} />} />
72+
              <Route path="/settings" element={<div>Settings Page</div>} />
73+
              <Route path="/profile" element={<ProfilePage theme={theme} />} />
74+
            </Routes>
75+
          </main>
76+
         
77+
        </div>
78+
      </div>
79+
    </div>
80+
  );
7281
}
7382

74-
export default App;
83+
export default App;
84+

‎src/components/Tables/CustomersTable.jsx‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import { MoreVertical, Search, Filter } from 'lucide-react';
33

4-
// Sahte (mock) müşteri verisi
54
const customersData = [
65
{
76
id: 1,
@@ -62,6 +61,15 @@ const statusColors = {
6261
};
6362

6463
function CustomersTable({ isDark }) {
64+
// Arama terimini tutmak için state
65+
const [searchTerm, setSearchTerm] = useState('');
66+
67+
// Arama terimine göre müşterileri filtrele
68+
const filteredCustomers = customersData.filter(customer =>
69+
customer.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
70+
customer.email.toLowerCase().includes(searchTerm.toLowerCase())
71+
);
72+
6573
return (
6674
<div className={`p-6 rounded-xl border shadow-sm transition-colors duration-300 ${
6775
isDark
@@ -76,7 +84,9 @@ function CustomersTable({ isDark }) {
7684
<Search className={`w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 ${isDark ? 'text-slate-500' : 'text-slate-400'}`} />
7785
<input
7886
type="text"
79-
placeholder="Search customer..."
87+
placeholder="Search customer..."
88+
value={searchTerm}
89+
onChange={(e) => setSearchTerm(e.target.value)}
8090
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 ${
8191
isDark
8292
? 'bg-slate-700 border-slate-600 text-white placeholder-slate-500'
@@ -105,7 +115,7 @@ function CustomersTable({ isDark }) {
105115
</div>
106116

107117
{/* Müşteri Öğeleri */}
108-
{customersData.map((customer) => (
118+
{filteredCustomers.map((customer) => (
109119
<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'}`}>
110120

111121
{/* Müşteri */}
@@ -142,7 +152,8 @@ function CustomersTable({ isDark }) {
142152
{/* Sayfalama (Pagination) */}
143153
<div className="flex items-center justify-between pt-4 mt-4 border-t">
144154
<span className={`text-sm ${isDark ? 'text-slate-400' : 'text-slate-600'}`}>
145-
Showing 1-5 of 5 customers
155+
{/*Dinamik olarak sonuç sayısını göster */}
156+
Showing {filteredCustomers.length} results
146157
</span>
147158
<div className="flex items-center space-x-1">
148159
<button className={`px-2.5 py-1 text-sm rounded-md ${isDark ? 'text-slate-500' : 'text-slate-400'}`}>Previous</button>
@@ -154,4 +165,4 @@ function CustomersTable({ isDark }) {
154165
);
155166
}
156167

157-
export default CustomersTable;
168+
export default CustomersTable;

‎src/components/Tables/OrdersTable.jsx‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import React, { useState } from 'react';
2+
import { MoreVertical, Search, Filter } from 'lucide-react';
3+
4+
// Sahte (mock) sipariş verisi
5+
const allOrdersData = [
6+
{ id: '#1256', customer: 'Terry Franci', date: 'Oct 25, 2025', total: '$2399.00', status: 'Delivered' },
7+
{ id: '#1257', customer: 'Alena Franci', date: 'Oct 25, 2025', total: '$879.00', status: 'Pending' },
8+
{ id: '#1258', customer: 'Brandon Philips', date: 'Oct 24, 2025', total: '$1869.00', status: 'Delivered' },
9+
{ id: '#1259', customer: 'Jocelyn Kenter', date: 'Oct 24, 2025', total: '$1699.00', status: 'Canceled' },
10+
{ id: '#1260', customer: 'Mara Vit', date: 'Oct 23, 2025', total: '$240.00', status: 'Delivered' },
11+
{ id: '#1261', customer: 'Terry Franci', date: 'Oct 22, 2025', total: '$55.00', status: 'Delivered' },
12+
{ id: '#1262', customer: 'Brandon Philips', date: 'Oct 21, 2025', total: '$320.00', status: 'Pending' },
13+
{ id: '#1263', customer: 'Alena Franci', date: 'Oct 20, 2025', total: '$199.90', status: 'Delivered' },
14+
];
15+
16+
const statusColors = {
17+
Delivered: 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400',
18+
Pending: 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-400',
19+
Canceled: 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400',
20+
};
21+
22+
const filterTabs = ['All', 'Delivered', 'Pending', 'Canceled'];
23+
24+
function OrdersTable({ isDark }) {
25+
const [activeTab, setActiveTab] = useState('All');
26+
27+
const filteredOrders = allOrdersData.filter(order =>
28+
activeTab === 'All' ? true : order.status === activeTab
29+
);
30+
31+
return (
32+
<div className={`p-6 rounded-xl border shadow-sm transition-colors duration-300 ${
33+
isDark
34+
? 'bg-slate-800 border-slate-700/50'
35+
: 'bg-white border-slate-200/50'
36+
}`}>
37+
{/* Tablo Başlığı ve Filtreler */}
38+
<div className="flex flex-col items-center justify-between gap-4 mb-4 md:flex-row">
39+
<div className="flex items-center space-x-2">
40+
{filterTabs.map(tab => (
41+
<button
42+
key={tab}
43+
onClick={() => setActiveTab(tab)}
44+
className={`px-3 py-1.5 text-sm font-semibold rounded-md transition-colors ${
45+
activeTab === tab
46+
? `text-indigo-600 ${isDark ? 'bg-indigo-500/20' : 'bg-indigo-50'}`
47+
: `${isDark ? 'text-slate-400 hover:text-slate-200' : 'text-slate-500 hover:text-slate-800'}`
48+
}`}
49+
>
50+
{tab}
51+
</button>
52+
))}
53+
</div>
54+
<div className="flex items-center w-full space-x-2 md:w-auto">
55+
<div className="relative w-full md:w-64">
56+
<Search className={`w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 ${isDark ? 'text-slate-500' : 'text-slate-400'}`} />
57+
<input
58+
type="text"
59+
placeholder="Search order ID or customer..."
60+
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 ${
61+
isDark
62+
? 'bg-slate-700 border-slate-600 text-white placeholder-slate-500'
63+
: 'bg-slate-100 border-transparent text-slate-800 placeholder-slate-400'
64+
}`}
65+
/>
66+
</div>
67+
</div>
68+
</div>
69+
70+
{/* Sipariş Listesi - Tablo */}
71+
<div className="overflow-x-auto">
72+
<div className="min-w-[700px]">
73+
{/* Tablo Başlıkları */}
74+
<div className={`grid grid-cols-12 gap-4 px-4 py-2 text-xs font-semibold uppercase ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>
75+
<div className="col-span-2">Order ID</div>
76+
<div className="col-span-3">Customer</div>
77+
<div className="col-span-3">Date</div>
78+
<div className="col-span-2">Total</div>
79+
<div className="col-span-2 text-right">Status</div>
80+
</div>
81+
82+
{/* Sipariş Öğeleri */}
83+
{filteredOrders.map((order) => (
84+
<div key={order.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'}`}>
85+
86+
{/* Order ID */}
87+
<div className={`col-span-2 font-semibold ${isDark ? 'text-white' : 'text-slate-800'}`}>{order.id}</div>
88+
89+
{/* Customer */}
90+
<div className="col-span-3">{order.customer}</div>
91+
92+
{/* Date */}
93+
<div className="col-span-3">{order.date}</div>
94+
95+
{/* Total */}
96+
<div className={`col-span-2 font-medium ${isDark ? 'text-slate-200' : 'text-slate-600'}`}>{order.total}</div>
97+
98+
{/* Status */}
99+
<div className="flex justify-end col-span-2">
100+
<span className={`px-2 py-0.5 text-xs font-semibold rounded-full ${statusColors[order.status]}`}>
101+
{order.status}
102+
</span>
103+
</div>
104+
</div>
105+
))}
106+
</div>
107+
</div>
108+
109+
{/* Sayfalama (Pagination) */}
110+
<div className="flex items-center justify-between pt-4 mt-4 border-t">
111+
<span className={`text-sm ${isDark ? 'text-slate-400' : 'text-slate-600'}`}>
112+
Showing {filteredOrders.length} of {allOrdersData.length} orders
113+
</span>
114+
<div className="flex items-center space-x-1">
115+
<button className={`px-2.5 py-1 text-sm rounded-md ${isDark ? 'text-slate-500' : 'text-slate-400'}`}>Previous</button>
116+
<button className={`px-2.5 py-1 text-sm rounded-md ${isDark ? 'bg-slate-700 text-white' : 'bg-indigo-600 text-white'}`}>1</button>
117+
<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>
118+
</div>
119+
</div>
120+
</div>
121+
);
122+
}
123+
124+
export default OrdersTable;

0 commit comments

Comments
 (0)