Initial commit - Asansör Takip Projesi
This commit is contained in:
@@ -0,0 +1,205 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
ArrowLeft,
|
||||
Plus,
|
||||
QrCode,
|
||||
Settings,
|
||||
CheckCircle2,
|
||||
AlertCircle,
|
||||
Hash,
|
||||
MoveUp,
|
||||
Weight,
|
||||
Tag
|
||||
} from 'lucide-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
|
||||
export default function BinaDetay() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const [showAddForm, setShowAddForm] = useState(false);
|
||||
|
||||
// Mock Data
|
||||
const building = { id: params.id, name: 'Güneş Apartmanı', address: 'Huzur Mah. 123. Sokak No:5, Ankara' };
|
||||
|
||||
const elevators = [
|
||||
{
|
||||
id: 1,
|
||||
label: 'A Blok - Sol',
|
||||
kimlikNo: '12345678',
|
||||
kapasite: '630 Kg / 8 Kişi',
|
||||
etiket: 'Yeşil',
|
||||
gecerlilik: '01.01.2027',
|
||||
durum: 'Aktif'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: 'A Blok - Sağ',
|
||||
kimlikNo: '12345679',
|
||||
kapasite: '630 Kg / 8 Kişi',
|
||||
etiket: 'Mavi',
|
||||
gecerlilik: '15.06.2026',
|
||||
durum: 'Bakımda'
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ marginBottom: '2rem' }}>
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem',
|
||||
color: 'var(--muted-foreground)',
|
||||
cursor: 'pointer',
|
||||
marginBottom: '1rem',
|
||||
fontWeight: 500
|
||||
}}
|
||||
>
|
||||
<ArrowLeft size={18} /> Geri Dön
|
||||
</button>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
|
||||
<div>
|
||||
<h1 style={{ fontSize: '1.75rem', fontWeight: 800, color: 'var(--secondary)' }}>{building.name}</h1>
|
||||
<p style={{ color: 'var(--muted-foreground)' }}>{building.address}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowAddForm(true)}
|
||||
className="btn-primary"
|
||||
>
|
||||
<Plus size={18} />
|
||||
Yeni Asansör Ekle
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: '1.5rem' }}>
|
||||
{elevators.map((elev) => (
|
||||
<div key={elev.id} className="premium-card" style={{ padding: '0' }}>
|
||||
<div style={{ padding: '1.5rem', borderBottom: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
|
||||
<div style={{
|
||||
background: 'var(--primary)15',
|
||||
padding: '0.5rem',
|
||||
borderRadius: '0.5rem',
|
||||
color: 'var(--primary)'
|
||||
}}>
|
||||
<MoveUp size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 style={{ fontWeight: 700 }}>{elev.label}</h3>
|
||||
<span style={{ fontSize: '0.75rem', color: 'var(--muted-foreground)' }}>ID: {elev.kimlikNo}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
||||
<span style={{
|
||||
fontSize: '0.7rem',
|
||||
fontWeight: 700,
|
||||
padding: '0.2rem 0.5rem',
|
||||
borderRadius: '4px',
|
||||
background: elev.etiket === 'Yeşil' ? '#10b981' : elev.etiket === 'Mavi' ? '#3b82f6' : '#f59e0b',
|
||||
color: 'white'
|
||||
}}>
|
||||
{elev.etiket} Etiket
|
||||
</span>
|
||||
<button style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--muted-foreground)' }}>
|
||||
<Settings size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: '1.25rem', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
||||
<Weight size={16} color="var(--muted-foreground)" />
|
||||
<span style={{ fontSize: '0.85rem' }}>{elev.kapasite}</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
||||
<Tag size={16} color="var(--muted-foreground)" />
|
||||
<span style={{ fontSize: '0.85rem' }}>Son Kontrol: {elev.gecerlilik}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: '1rem 1.5rem', background: 'var(--muted)', borderBottomLeftRadius: 'var(--radius)', borderBottomRightRadius: 'var(--radius)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
|
||||
{elev.durum === 'Aktif' ? <CheckCircle2 size={14} color="#10b981" /> : <AlertCircle size={14} color="#f59e0b" />}
|
||||
<span style={{ fontSize: '0.8rem', fontWeight: 600 }}>{elev.durum}</span>
|
||||
</div>
|
||||
<button style={{
|
||||
background: 'white',
|
||||
border: '1px solid var(--border)',
|
||||
padding: '0.4rem 0.75rem',
|
||||
borderRadius: '0.5rem',
|
||||
fontSize: '0.8rem',
|
||||
fontWeight: 600,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.4rem',
|
||||
cursor: 'pointer'
|
||||
}}>
|
||||
<QrCode size={14} /> Karekod Yazdır
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Placeholder for Add Form Modal */}
|
||||
{showAddForm && (
|
||||
<div style={{
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
background: 'rgba(0,0,0,0.5)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backdropFilter: 'blur(4px)',
|
||||
zIndex: 100
|
||||
}}>
|
||||
<div className="premium-card" style={{ width: '100%', maxWidth: '500px' }}>
|
||||
<h2 style={{ marginBottom: '1.5rem', fontWeight: 800 }}>Yeni Asansör Kaydı</h2>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||||
<input placeholder="Asansör Adı (Örn: A Blok)" style={inputStyle} />
|
||||
<input placeholder="Belediye/Bakanlık Kimlik No" style={inputStyle} />
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
|
||||
<input placeholder="Kapasite (Kg)" style={inputStyle} />
|
||||
<input placeholder="Kişi Sayısı" style={inputStyle} />
|
||||
</div>
|
||||
<select style={inputStyle}>
|
||||
<option>Etiket Rengi Seçiniz</option>
|
||||
<option>Yeşil</option>
|
||||
<option>Mavi</option>
|
||||
<option>Sarı</option>
|
||||
<option>Kırmızı</option>
|
||||
</select>
|
||||
<div style={{ display: 'flex', gap: '1rem', marginTop: '1rem' }}>
|
||||
<button
|
||||
onClick={() => setShowAddForm(false)}
|
||||
className="btn-primary"
|
||||
style={{ background: 'var(--muted)', color: 'var(--secondary)', flex: 1 }}
|
||||
>
|
||||
İptal
|
||||
</button>
|
||||
<button className="btn-primary" style={{ flex: 1 }}>Kaydet</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const inputStyle = {
|
||||
width: '100%',
|
||||
padding: '0.75rem 1rem',
|
||||
borderRadius: '0.75rem',
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--muted)',
|
||||
fontSize: '0.9rem',
|
||||
outline: 'none'
|
||||
};
|
||||
Reference in New Issue
Block a user