Container Modal problemleri

This commit is contained in:
Sedat ÖZTÜRK 2025-09-16 08:58:13 +03:00
parent 811a575ff7
commit 57796d1177
4 changed files with 635 additions and 710 deletions

View file

@ -82,7 +82,7 @@ define(['./workbox-a959eb95'], (function (workbox) { 'use strict';
"revision": "3ca0b8505b4bec776b69afdba2768812" "revision": "3ca0b8505b4bec776b69afdba2768812"
}, { }, {
"url": "/index.html", "url": "/index.html",
"revision": "0.daul0044rt" "revision": "0.hml46tc2c78"
}], {}); }], {});
workbox.cleanupOutdatedCaches(); workbox.cleanupOutdatedCaches();
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("/index.html"), { workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("/index.html"), {

View file

@ -26,6 +26,7 @@ import CheckNoteDetails from './CheckNoteDetails'
import CollectionDialog from './CollectionDialog' import CollectionDialog from './CollectionDialog'
import EndorsementDialog from './EndorsementDialog' import EndorsementDialog from './EndorsementDialog'
import Widget from '../../../components/common/Widget' import Widget from '../../../components/common/Widget'
import { Container } from '@/components/shared'
interface CheckNoteManagementProps { interface CheckNoteManagementProps {
checks: FiCheck[] checks: FiCheck[]
@ -662,92 +663,217 @@ const CheckNoteManagement: React.FC<CheckNoteManagementProps> = ({
}) })
return ( return (
<div className="space-y-2"> <Container>
{/* Header */} <div className="space-y-2">
<div className="flex items-center justify-between"> {/* Header */}
<div> <div className="flex items-center justify-between">
<h2 className="text-2xl font-bold text-gray-900">Çek & Senet Takibi</h2> <div>
<p className="text-gray-600">Alınan ve verilen çek & senet yönetimi</p> <h2 className="text-2xl font-bold text-gray-900">Çek & Senet Takibi</h2>
<p className="text-gray-600">Alınan ve verilen çek & senet yönetimi</p>
</div>
<div className="flex gap-2 text-sm">
<button
onClick={handleAddNote}
className="flex items-center gap-2 px-3 py-1.5 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
>
<FaFileAlt className="w-4 h-4" />
Yeni Senet
</button>
<button
onClick={handleAddCheck}
className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
>
<FaCreditCard className="w-4 h-4" />
Yeni Çek
</button>
</div>
</div> </div>
<div className="flex gap-2 text-sm">
<button {/* Stats Cards */}
onClick={handleAddNote} <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
className="flex items-center gap-2 px-3 py-1.5 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors" <Widget
> title="Toplam Çek"
<FaFileAlt className="w-4 h-4" /> value={formatCurrency(totalCheckAmount)}
Yeni Senet color="blue"
</button> icon="FaCreditCard"
<button subTitle={`${checks.length} adet`}
onClick={handleAddCheck} />
className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors" <Widget
> title="Toplam Senet"
<FaCreditCard className="w-4 h-4" /> value={formatCurrency(totalNoteAmount)}
Yeni Çek color="green"
</button> icon="FaFileAlt"
subTitle={`${promissoryNotes.length} adet`}
/>
<Widget
title="Alacak Çek"
value={formatCurrency(receivedCheckAmount)}
color="green"
icon="FaCreditCard"
/>
<Widget
title="Alacak Senet"
value={formatCurrency(receivedNoteAmount)}
color="green"
icon="FaFileAlt"
/>
</div> </div>
</div>
{/* Stats Cards */} {/* Alerts */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-4"> {(dueChecks.length > 0 ||
<Widget dueNotes.length > 0 ||
title="Toplam Çek" overdueChecks.length > 0 ||
value={formatCurrency(totalCheckAmount)} overdueNotes.length > 0) && (
color="blue" <div className="space-y-3">
icon="FaCreditCard" {(dueChecks.length > 0 || dueNotes.length > 0) && (
subTitle={`${checks.length} adet`} <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
/> <div className="flex items-center gap-2">
<Widget <FaClock className="w-5 h-5 text-yellow-600" />
title="Toplam Senet" <h3 className="text-base font-semibold text-yellow-900">Vadesi Yaklaşan</h3>
value={formatCurrency(totalNoteAmount)} </div>
color="green" <p className="text-sm text-yellow-700 mt-1">
icon="FaFileAlt" {dueChecks.length} çek ve {dueNotes.length} senet 7 gün içinde vadesi dolacak.
subTitle={`${promissoryNotes.length} adet`} </p>
/>
<Widget
title="Alacak Çek"
value={formatCurrency(receivedCheckAmount)}
color="green"
icon="FaCreditCard"
/>
<Widget
title="Alacak Senet"
value={formatCurrency(receivedNoteAmount)}
color="green"
icon="FaFileAlt"
/>
</div>
{/* Alerts */}
{(dueChecks.length > 0 ||
dueNotes.length > 0 ||
overdueChecks.length > 0 ||
overdueNotes.length > 0) && (
<div className="space-y-3">
{(dueChecks.length > 0 || dueNotes.length > 0) && (
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
<div className="flex items-center gap-2">
<FaClock className="w-5 h-5 text-yellow-600" />
<h3 className="text-base font-semibold text-yellow-900">Vadesi Yaklaşan</h3>
</div> </div>
<p className="text-sm text-yellow-700 mt-1"> )}
{dueChecks.length} çek ve {dueNotes.length} senet 7 gün içinde vadesi dolacak.
</p> {(overdueChecks.length > 0 || overdueNotes.length > 0) && (
</div> <div className="bg-red-50 border border-red-200 rounded-lg p-3">
<div className="flex items-center gap-2">
<FaExclamationTriangle className="w-5 h-5 text-red-600" />
<h3 className="text-base font-semibold text-red-900">Vadesi Geçmiş</h3>
</div>
<p className="text-sm text-red-700 mt-1">
{overdueChecks.length} çek ve {overdueNotes.length} senet vadesi geçmiş durumda.
</p>
</div>
)}
</div>
)}
{/* Tabs */}
<div className="border-b border-gray-200">
<nav className="-mb-px flex space-x-6">
<button
onClick={() => setActiveTab('checks')}
className={`py-3 px-1 border-b-2 font-medium text-sm ${
activeTab === 'checks'
? 'border-blue-500 text-blue-600'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
}`}
>
Çekler ({checks.length})
</button>
<button
onClick={() => setActiveTab('notes')}
className={`py-3 px-1 border-b-2 font-medium text-sm ${
activeTab === 'notes'
? 'border-blue-500 text-blue-600'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
}`}
>
Senetler ({promissoryNotes.length})
</button>
</nav>
</div>
{/* Filters */}
<div className="flex gap-3 items-center">
<div className="flex-1 relative">
<FaSearch className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
<input
type="text"
placeholder={
activeTab === 'checks'
? 'Çek no, keşideci, lehtar veya banka ara...'
: 'Senet no, keşideci veya lehtar ara...'
}
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full pl-10 pr-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<select
value={selectedType}
onChange={(e) =>
setSelectedType(e.target.value as CheckTypeEnum | NoteTypeEnum | 'all')
}
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="all">Tüm Türler</option>
<option value="RECEIVED">Alınan</option>
<option value="ISSUED">Verilen</option>
</select>
{activeTab === 'checks' ? (
<select
value={selectedCheckStatus}
onChange={(e) => setSelectedCheckStatus(e.target.value as CheckStatusEnum | 'all')}
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="all">Tüm Durumlar</option>
{Object.values(CheckStatusEnum).map((status) => (
<option key={status} value={status}>
{getCheckStatusLabel(status)}
</option>
))}
</select>
) : (
<select
value={selectedNoteStatus}
onChange={(e) => setSelectedNoteStatus(e.target.value as NoteStatusEnum | 'all')}
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="all">Tüm Durumlar</option>
{Object.values(NoteStatusEnum).map((status) => (
<option key={status} value={status}>
{getNoteStatusLabel(status)}
</option>
))}
</select>
)} )}
{(overdueChecks.length > 0 || overdueNotes.length > 0) && ( <select
<div className="bg-red-50 border border-red-200 rounded-lg p-3"> value={sortBy}
<div className="flex items-center gap-2"> onChange={(e) => setSortBy(e.target.value as 'dueDate' | 'amount' | 'issueDate')}
<FaExclamationTriangle className="w-5 h-5 text-red-600" /> className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
<h3 className="text-base font-semibold text-red-900">Vadesi Geçmiş</h3> >
</div> <option value="dueDate">Vade Tarihine Göre</option>
<p className="text-sm text-red-700 mt-1"> <option value="amount">Tutara Göre</option>
{overdueChecks.length} çek ve {overdueNotes.length} senet vadesi geçmiş durumda. <option value="issueDate">Düzenleme Tarihine Göre</option>
</p> </select>
</div> </div>
{/* Data Table */}
<div className="bg-white rounded-lg shadow-sm border overflow-x-auto">
{activeTab === 'checks' ? (
<DataTable data={filteredChecks} columns={checkColumns} />
) : (
<DataTable data={filteredNotes} columns={noteColumns} />
)} )}
</div> </div>
)}
{/* Empty State */}
{((activeTab === 'checks' && filteredChecks.length === 0) ||
(activeTab === 'notes' && filteredNotes.length === 0)) && (
<div className="text-center py-10">
{activeTab === 'checks' ? (
<FaCreditCard className="w-12 h-12 text-gray-400 mx-auto mb-4" />
) : (
<FaFileAlt className="w-12 h-12 text-gray-400 mx-auto mb-4" />
)}
<h3 className="text-lg font-medium text-gray-900 mb-2">
{activeTab === 'checks' ? 'Çek bulunamadı' : 'Senet bulunamadı'}
</h3>
<p className="text-sm text-gray-500">
{activeTab === 'checks'
? 'Yeni bir çek ekleyin veya arama kriterlerinizi değiştirin.'
: 'Yeni bir senet ekleyin veya arama kriterlerinizi değiştirin.'}
</p>
</div>
)}
</div>
{/* Modal Components */} {/* Modal Components */}
<CheckForm <CheckForm
@ -787,128 +913,7 @@ const CheckNoteManagement: React.FC<CheckNoteManagementProps> = ({
isOpen={showEndorsementDialog} isOpen={showEndorsementDialog}
/> />
)} )}
</Container>
{/* Tabs */}
<div className="border-b border-gray-200">
<nav className="-mb-px flex space-x-6">
<button
onClick={() => setActiveTab('checks')}
className={`py-3 px-1 border-b-2 font-medium text-sm ${
activeTab === 'checks'
? 'border-blue-500 text-blue-600'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
}`}
>
Çekler ({checks.length})
</button>
<button
onClick={() => setActiveTab('notes')}
className={`py-3 px-1 border-b-2 font-medium text-sm ${
activeTab === 'notes'
? 'border-blue-500 text-blue-600'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
}`}
>
Senetler ({promissoryNotes.length})
</button>
</nav>
</div>
{/* Filters */}
<div className="flex gap-3 items-center">
<div className="flex-1 relative">
<FaSearch className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
<input
type="text"
placeholder={
activeTab === 'checks'
? 'Çek no, keşideci, lehtar veya banka ara...'
: 'Senet no, keşideci veya lehtar ara...'
}
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full pl-10 pr-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<select
value={selectedType}
onChange={(e) => setSelectedType(e.target.value as CheckTypeEnum | NoteTypeEnum | 'all')}
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="all">Tüm Türler</option>
<option value="RECEIVED">Alınan</option>
<option value="ISSUED">Verilen</option>
</select>
{activeTab === 'checks' ? (
<select
value={selectedCheckStatus}
onChange={(e) => setSelectedCheckStatus(e.target.value as CheckStatusEnum | 'all')}
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="all">Tüm Durumlar</option>
{Object.values(CheckStatusEnum).map((status) => (
<option key={status} value={status}>
{getCheckStatusLabel(status)}
</option>
))}
</select>
) : (
<select
value={selectedNoteStatus}
onChange={(e) => setSelectedNoteStatus(e.target.value as NoteStatusEnum | 'all')}
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="all">Tüm Durumlar</option>
{Object.values(NoteStatusEnum).map((status) => (
<option key={status} value={status}>
{getNoteStatusLabel(status)}
</option>
))}
</select>
)}
<select
value={sortBy}
onChange={(e) => setSortBy(e.target.value as 'dueDate' | 'amount' | 'issueDate')}
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="dueDate">Vade Tarihine Göre</option>
<option value="amount">Tutara Göre</option>
<option value="issueDate">Düzenleme Tarihine Göre</option>
</select>
</div>
{/* Data Table */}
<div className="bg-white rounded-lg shadow-sm border overflow-x-auto">
{activeTab === 'checks' ? (
<DataTable data={filteredChecks} columns={checkColumns} />
) : (
<DataTable data={filteredNotes} columns={noteColumns} />
)}
</div>
{/* Empty State */}
{((activeTab === 'checks' && filteredChecks.length === 0) ||
(activeTab === 'notes' && filteredNotes.length === 0)) && (
<div className="text-center py-10">
{activeTab === 'checks' ? (
<FaCreditCard className="w-12 h-12 text-gray-400 mx-auto mb-4" />
) : (
<FaFileAlt className="w-12 h-12 text-gray-400 mx-auto mb-4" />
)}
<h3 className="text-lg font-medium text-gray-900 mb-2">
{activeTab === 'checks' ? 'Çek bulunamadı' : 'Senet bulunamadı'}
</h3>
<p className="text-sm text-gray-500">
{activeTab === 'checks'
? 'Yeni bir çek ekleyin veya arama kriterlerinizi değiştirin.'
: 'Yeni bir senet ekleyin veya arama kriterlerinizi değiştirin.'}
</p>
</div>
)}
</div>
) )
} }

View file

@ -573,23 +573,23 @@ const ActivityRecords: React.FC = () => {
<p className="text-gray-500">Arama kriterlerinizi değiştirmeyi deneyin.</p> <p className="text-gray-500">Arama kriterlerinizi değiştirmeyi deneyin.</p>
</div> </div>
)} )}
{/* Modals */}
<ActivityForm
isOpen={isFormOpen}
onClose={handleCloseForm}
onSave={handleSaveActivity}
activity={selectedActivity}
mode={formMode}
/>
<ActivityDetails
isOpen={isDetailsOpen}
onClose={handleCloseDetails}
onEdit={handleEditFromDetails}
activity={selectedActivity}
/>
</div> </div>
{/* Modals */}
<ActivityForm
isOpen={isFormOpen}
onClose={handleCloseForm}
onSave={handleSaveActivity}
activity={selectedActivity}
mode={formMode}
/>
<ActivityDetails
isOpen={isDetailsOpen}
onClose={handleCloseDetails}
onEdit={handleEditFromDetails}
activity={selectedActivity}
/>
</Container> </Container>
) )
} }