sozsoft/erp-platform
1
0
Fork 0
Code Issues 6 Pull requests Projects 3 Releases Packages Wiki Activity Actions

Report Viewer Dashboard

Browse source
This commit is contained in:
Sedat Öztürk 2025-08-15 22:39:11 +03:00
parent 9ca2b81a50
commit 82958c1872
13 changed files with 393 additions and 241 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
api/src/Kurs.Platform.Application.Contracts/Reports/GetReportsInput.cs
View file

@ -6,7 +6,7 @@ namespace Kurs.Platform.Reports
public class GetReportTemplatesInput : PagedAndSortedResultRequestDto
{
public string Filter { get; set; }
public string Category { get; set; }
public string CategoryName { get; set; }
}
public class GetGeneratedReportsInput : PagedAndSortedResultRequestDto

97
api/src/Kurs.Platform.Application/Reports/ReportAppService.cs
View file

@ -9,7 +9,6 @@ using Volo.Abp.Application.Dtos;
using Volo.Abp.Domain.Repositories;
using System.Linq.Dynamic.Core;
using Microsoft.EntityFrameworkCore;
using Volo.Abp.Domain.Entities;
namespace Kurs.Platform.Reports;
@ -56,9 +55,9 @@ public class ReportAppService : PlatformAppService, IReportAppService
);
}
if (!string.IsNullOrWhiteSpace(input.Category))
if (!string.IsNullOrWhiteSpace(input.CategoryName))
{
query = query.Where(x => x.CategoryName == input.Category);
query = query.Where(x => x.CategoryName == input.CategoryName);
}
// Toplam kayıt sayısı
@ -127,43 +126,97 @@ public class ReportAppService : PlatformAppService, IReportAppService
public async Task<ReportTemplateDto> UpdateTemplateAsync(Guid id, UpdateReportTemplateDto input)
{
// 1) Şablonu getir ve alanlarını güncelle
var template = await _reportTemplateRepository.GetAsync(id);
template.Name = input.Name;
template.Description = input.Description;
template.HtmlContent = input.HtmlContent;
template.CategoryName = input.CategoryName;
template.Tags = JsonSerializer.Serialize(input.Tags);
template.Tags = JsonSerializer.Serialize(input.Tags ?? []);
await _reportTemplateRepository.UpdateAsync(template);
// Şablonu hemen persist et (audit alanları için de iyi olur)
await _reportTemplateRepository.UpdateAsync(template, autoSave: true);
// Mevcut parametreleri sil
var existingParameters = await _reportParameterRepository.GetListAsync(p => p.ReportTemplateId == id);
foreach (var param in existingParameters)
// 2) Parametrelerde upsert + artıklarını sil
var existingParams = await _reportParameterRepository.GetListAsync(p => p.ReportTemplateId == id);
var existingById = existingParams.ToDictionary(p => p.Id, p => p);
var inputParams = input.Parameters ?? new List<UpdateReportParameterDto>();
// Id'si olan/olmayan diye ayır
var withId = inputParams.Where(x => x.Id.HasValue).ToList();
var withoutId = inputParams.Where(x => !x.Id.HasValue).ToList();
// 2.a) Id'si olanları güncelle (varsa) ya da ekle (yoksa)
foreach (var dto in withId)
{
await _reportParameterRepository.DeleteAsync(param);
var pid = dto.Id!.Value;
if (existingById.TryGetValue(pid, out var entity))
{
// Güncelle
entity.Name = dto.Name;
entity.Placeholder = dto.Placeholder;
entity.Type = dto.Type;
entity.Required = dto.Required;
entity.DefaultValue = dto.DefaultValue;
entity.Description = dto.Description;
await _reportParameterRepository.UpdateAsync(entity);
existingById.Remove(pid); // kalanlar silinecek listesinde kalmasın
}
// Yeni parametreleri ekle
foreach (var paramDto in input.Parameters)
else
{
var parameter = new ReportParameter(
paramDto.Id ?? GuidGenerator.Create(),
// DB'de yoksa yeni ekle (istemci Id göndermiş olabilir)
var newParam = new ReportParameter(
pid,
template.Id,
paramDto.Name,
paramDto.Placeholder,
paramDto.Type,
paramDto.Required);
dto.Name,
dto.Placeholder,
dto.Type,
dto.Required)
{
DefaultValue = dto.DefaultValue,
Description = dto.Description
};
parameter.DefaultValue = paramDto.DefaultValue;
parameter.Description = paramDto.Description;
await _reportParameterRepository.InsertAsync(parameter);
await _reportParameterRepository.InsertAsync(newParam);
}
}
// 2.b) Id'siz gelenleri yeni olarak ekle
foreach (var dto in withoutId)
{
var newParam = new ReportParameter(
GuidGenerator.Create(),
template.Id,
dto.Name,
dto.Placeholder,
dto.Type,
dto.Required)
{
DefaultValue = dto.DefaultValue,
Description = dto.Description
};
await _reportParameterRepository.InsertAsync(newParam);
}
// 2.c) Input'ta olmayan eski parametreleri sil
foreach (var leftover in existingById.Values)
{
await _reportParameterRepository.DeleteAsync(leftover);
}
// 3) Değişiklikleri tek seferde kaydet
await CurrentUnitOfWork.SaveChangesAsync();
// 4) Güncel DTO'yu dön
return await GetTemplateAsync(template.Id);
}
public async Task DeleteTemplateAsync(Guid id)
{
await _reportTemplateRepository.DeleteAsync(id);

2
api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json
View file

@ -26002,7 +26002,7 @@
{
"id": "5f4d6c1f-b1e0-4f91-854c-1d59c25e7191",
"name": "Genel Raporlar",
"description": "Genel Şirket içi raporlar",
"description": "Şirket içi genel tüm raporlar",
"icon": "📊"
},
{

2
ui/dev-dist/sw.js
View file

@ -82,7 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
"revision": "3ca0b8505b4bec776b69afdba2768812"
}, {
"url": "index.html",
"revision": "0.71ce98091og"
"revision": "0.760g82pgmf"
}], {});
workbox.cleanupOutdatedCaches();
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

37
ui/src/components/reports/Dashboard.tsx
View file

@ -25,7 +25,7 @@ export const Dashboard: React.FC = () => {
() => ({
id: 'tumu-category',
name: 'Tümü',
description: '',
description: 'Tüm kategorilere ait raporlar',
icon: '📋',
}),
[],
@ -148,7 +148,7 @@ export const Dashboard: React.FC = () => {
<button
key={category.id}
onClick={() => setSelectedCategory(category)}
className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg text-left transition-colors ${
className={`w-full flex items-center space-x-3 px-2 py-3 rounded-lg text-left transition-colors ${
selectedCategory?.id === category.id
? 'bg-blue-100 text-blue-700'
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
@ -174,9 +174,23 @@ export const Dashboard: React.FC = () => {
{/* Main Content */}
<div className="flex-1">
<h2 className="text-2xl font-bold text-gray-900 mb-6">
{translate('::App.Forum.Dashboard.Statistics')}
<div className="flex items-center justify-between">
<h2 className="text-2xl font-bold text-gray-900">
{translate('::' + selectedCategory?.name)}
</h2>
<Button
variant="solid"
onClick={handleCreateTemplate}
className="bg-blue-600 hover:bg-blue-700 font-medium px-6 py-2.5 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 flex items-center space-x-2"
>
<Plus className="h-5 w-5" />
<span>Yeni Şablon</span>
</Button>
</div>
<div className="text-sm text-gray-500 ml-1 mb-4">
{translate('::' + selectedCategory?.description)}
</div>
{/* Stats */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div className="bg-white rounded-xl shadow-md p-6 border border-gray-200">
@ -219,7 +233,6 @@ export const Dashboard: React.FC = () => {
</div>
{/* Filters */}
<div className="bg-white rounded-xl shadow-md p-6 mb-8 border border-gray-200">
<div className="flex flex-col md:flex-row gap-4">
<div className="flex-1">
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
@ -231,15 +244,10 @@ export const Dashboard: React.FC = () => {
/>
</div>
</div>
<Button onClick={handleCreateTemplate}>
<Plus className="h-4 w-4 mr-2" />
Yeni Şablon
</Button>
</div>
</div>
{/* Templates Grid */}
{filteredTemplates.length === 0 ? (
<div className="bg-white rounded-xl shadow-md p-12 border border-gray-200">
<div className="bg-white rounded-xl shadow-md p-12 border border-gray-200 text-center">
<FileText className="h-16 w-16 text-gray-400 mx-auto mb-4" />
<h3 className="text-lg font-medium text-gray-900 mb-2">
{templates.length === 0 ? 'Henüz şablon oluşturulmamış' : 'Şablon bulunamadı'}
@ -249,12 +257,6 @@ export const Dashboard: React.FC = () => {
? 'İlk rapor şablonunuzu oluşturarak başlayın.'
: 'Arama kriterlerinize uygun şablon bulunamadı.'}
</p>
{templates.length === 0 && (
<Button onClick={handleCreateTemplate}>
<Plus className="h-4 w-4 mr-2" />
İlk Şablonu Oluştur
</Button>
)}
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@ -282,6 +284,7 @@ export const Dashboard: React.FC = () => {
}}
onSave={handleSaveTemplate}
template={editingTemplate}
categories={categories}
/>
<ReportGenerator

11
ui/src/components/reports/ReportGenerator.tsx
View file

@ -49,7 +49,7 @@ export const ReportGenerator: React.FC<ReportGeneratorProps> = ({
if (reportId) {
// Yeni sekmede rapor URL'sini aç
const reportUrl = `/admin/report/${reportId}`
const reportUrl = `/admin/reports/${reportId}`
window.open(reportUrl, '_blank')
onClose() // Modal'ı kapat
}
@ -78,7 +78,7 @@ export const ReportGenerator: React.FC<ReportGeneratorProps> = ({
<p className="text-gray-600 text-sm">{template.description}</p>
<div className="flex items-center mt-2 space-x-2">
<span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
{template.category}
{template.categoryName}
</span>
{template.tags.map((tag) => (
<span key={tag} className="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded">
@ -116,10 +116,13 @@ export const ReportGenerator: React.FC<ReportGeneratorProps> = ({
)}
<div className="flex justify-end space-x-3">
<Button variant="solid" onClick={onClose} disabled={isGenerating}>
<Button onClick={onClose} disabled={isGenerating}>
İptal
</Button>
<Button onClick={handleGenerateAndShow} disabled={!isValid || isGenerating}>
<Button variant="solid" onClick={handleGenerateAndShow} disabled={!isValid || isGenerating}
className="bg-blue-600 hover:bg-blue-700 font-medium px-2 sm:px-3 py-1.5 rounded text-xs flex items-center gap-1"
>
<FileText className="h-4 w-4 mr-2" />
{isGenerating ? 'Oluşturuluyor...' : 'Rapor Oluştur'}
</Button>

21
ui/src/components/reports/ReportViewer.tsx
View file

@ -234,14 +234,10 @@ export const ReportViewer: React.FC = () => {
<div className="min-h-screen bg-gray-50">
{/* Header - Print edilmeyecek */}
<div className="print:hidden bg-white shadow-sm border-b border-gray-200 sticky top-0 z-10">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="w-full px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<div className="flex items-center space-x-4">
<Button variant="solid" onClick={() => navigate('/')}>
<ArrowLeft className="h-4 w-4 mr-2" />
Geri Dön
</Button>
<div>
<div className="flex items-center space-x-4 flex-1">
<div className="flex-1">
<h1 className="text-lg font-semibold text-gray-900">{report.templateName}</h1>
<div className="flex items-center space-x-4 text-sm text-gray-500">
<span className="flex items-center">
@ -257,14 +253,14 @@ export const ReportViewer: React.FC = () => {
{template && (
<span className="flex items-center">
<FileText className="h-4 w-4 mr-1" />
{template.category}
{template.categoryName}
</span>
)}
</div>
</div>
</div>
<div className="flex items-center space-x-2">
<div className="flex items-center space-x-2 flex-shrink-0">
<Button variant="solid" onClick={handleZoomOut} disabled={zoomLevel <= 50} size="sm">
<ZoomOut className="h-4 w-4" />
</Button>
@ -275,11 +271,14 @@ export const ReportViewer: React.FC = () => {
<ZoomIn className="h-4 w-4" />
</Button>
<div className="w-px h-6 bg-gray-300 mx-2"></div>
<Button variant="solid" onClick={handleDownloadPdf}>
<Button
onClick={handleDownloadPdf}
className="bg-gray-600 hover:bg-gray-700 font-medium px-2 sm:px-3 py-1.5 rounded text-xs flex items-center gap-1"
>
<Download className="h-4 w-4 mr-2" />
PDF İndir
</Button>
<Button onClick={handlePrint}>Yazdır</Button>
<Button variant="solid" onClick={handlePrint}>Yazdır</Button>
</div>
</div>
</div>

71
ui/src/components/reports/TemplateCard.tsx
View file

@ -17,70 +17,79 @@ export const TemplateCard: React.FC<TemplateCardProps> = ({
onGenerate,
}) => {
return (
<div className="bg-white rounded-xl shadow-md hover:shadow-lg transition-all duration-200 border border-gray-200">
<div className="p-6">
<div className="flex items-start justify-between mb-4">
<div className="flex-1">
<h3 className="text-lg font-semibold text-gray-900 mb-2">{template.name}</h3>
<p className="text-gray-600 text-sm mb-3">{template.description}</p>
<div className="bg-white rounded-xl shadow-md hover:shadow-lg transition-all duration-200 border border-gray-200 flex flex-col">
<div className="p-4 flex-1 flex flex-col">
{/* Header with title and parameter count */}
<div className="flex items-start justify-between mb-3 min-h-0">
<div className="flex-1 min-w-0 pr-3">
<h3 className="text-lg font-semibold text-gray-900 mb-2 truncate">{template.name}</h3>
<p className="text-gray-600 text-sm mb-3 line-clamp-2">{template.description}</p>
</div>
<div className="flex items-center space-x-2 mb-3">
<span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full font-medium">
{template.category}
<div className="flex items-center gap-1 flex-shrink-0 bg-gray-50 px-2 py-1 rounded-lg">
<FileText className="h-4 w-4 text-blue-500" />
<span className="text-xs text-gray-500 whitespace-nowrap">{template.parameters.length}</span>
</div>
</div>
{/* Tags section with proper wrapping */}
<div className="flex items-center gap-1 mb-4 flex-wrap min-h-0">
<span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full font-medium flex-shrink-0">
{template.categoryName}
</span>
{template.tags.slice(0, 2).map((tag) => (
<span
key={tag}
className="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full"
className="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full flex-shrink-0 max-w-20 truncate"
>
{tag}
</span>
))}
{template.tags.length > 2 && (
<span className="text-xs text-gray-500">+{template.tags.length - 2}</span>
<span className="text-xs text-gray-500 flex-shrink-0">+{template.tags.length - 2}</span>
)}
</div>
{/* Footer with date and actions */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mt-auto pt-3 border-t border-gray-100">
<div className="text-xs text-gray-500 flex-shrink-0">
<p className="truncate">{new Date(template.lastModificationTime || template.creationTime).toLocaleString('tr-TR', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit'
})}</p>
</div>
<div className="flex items-center space-x-2">
<FileText className="h-5 w-5 text-blue-500" />
<span className="text-sm text-gray-500">{template.parameters.length} parametre</span>
</div>
</div>
<div className="flex items-center justify-between">
<div className="text-xs text-gray-500">
<p>Güncellenme: {template.lastModificationTime}</p>
</div>
<div className="flex items-center space-x-2">
<div className="flex items-center gap-1 flex-shrink-0">
<Button
variant="solid"
size="sm"
onClick={() => onGenerate(template)}
className="hover:scale-105 transform transition-transform"
className="bg-blue-600 hover:bg-blue-700 font-medium px-2 sm:px-3 py-1.5 rounded text-xs flex items-center gap-1"
>
<Play className="h-4 w-4 mr-1" />
Üret
<Play className="h-3 w-3" />
<span className="hidden sm:inline">Üret</span>
</Button>
<Button
variant="solid"
size="sm"
onClick={() => onEdit(template)}
className="hover:scale-105 transform transition-transform"
className="bg-gray-600 hover:bg-gray-700 font-medium px-2 sm:px-3 py-1.5 rounded text-xs flex items-center gap-1"
>
<Edit className="h-4 w-4" />
Düzenle
<Edit className="h-3 w-3" />
<span className="hidden sm:inline">Düzenle</span>
</Button>
<Button
variant="solid"
size="sm"
onClick={() => onDelete(template.id)}
className="hover:scale-105 transform transition-transform"
className="bg-red-600 hover:bg-red-700 font-medium px-2 py-1.5 rounded text-xs flex items-center"
>
<Trash2 className="h-4 w-4" />
<Trash2 className="h-3 w-3" />
</Button>
</div>
</div>

241
ui/src/components/reports/TemplateEditor.tsx
View file

@ -1,14 +1,16 @@
import React, { useState, useEffect } from 'react'
import { Save, X, FileText, Code } from 'lucide-react'
import { Save, X, FileText, Code, Settings } from 'lucide-react'
import { ReportHtmlEditor } from './ReportHtmlEditor'
import { ReportParameterDto, ReportTemplateDto } from '@/proxy/reports/models'
import { ReportParameterDto, ReportTemplateDto, ReportCategoryDto } from '@/proxy/reports/models'
import { Button, Input, Dialog } from '../ui'
import { useLocalization } from '@/utils/hooks/useLocalization'
interface TemplateEditorProps {
isOpen: boolean
onClose: () => void
onSave: (template: ReportTemplateDto) => Promise<void>
template?: ReportTemplateDto | null
categories: ReportCategoryDto[]
}
export const TemplateEditor: React.FC<TemplateEditorProps> = ({
@ -16,17 +18,19 @@ export const TemplateEditor: React.FC<TemplateEditorProps> = ({
onClose,
onSave,
template,
categories,
}) => {
const [activeTab, setActiveTab] = useState<'info' | 'content'>('info')
const [activeTab, setActiveTab] = useState<'info' | 'parameters' | 'content'>('info')
const [formData, setFormData] = useState({
name: '',
description: '',
htmlContent: '',
category: 'Genel',
categoryName: 'Genel Raporlar',
tags: [] as string[],
parameters: [] as ReportParameterDto[],
})
const { translate } = useLocalization()
const [tagInput, setTagInput] = useState('')
const [isSaving, setIsSaving] = useState(false)
@ -36,7 +40,7 @@ export const TemplateEditor: React.FC<TemplateEditorProps> = ({
name: template.name,
description: template.description || '',
htmlContent: template.htmlContent,
category: template.category || 'Genel',
categoryName: template.categoryName!,
tags: template.tags,
parameters: template.parameters,
})
@ -45,7 +49,7 @@ export const TemplateEditor: React.FC<TemplateEditorProps> = ({
name: '',
description: '',
htmlContent: '',
category: 'Genel',
categoryName: 'Genel Raporlar',
tags: [],
parameters: [],
})
@ -56,7 +60,7 @@ export const TemplateEditor: React.FC<TemplateEditorProps> = ({
// Otomatik parametre algılama
useEffect(() => {
const extractParameters = (htmlContent: string) => {
const paramRegex = /@@([A-Z_][A-Z0-9_]*)/g
const paramRegex = /@@([\p{L}0-9_]+)/gu
const matches = [...htmlContent.matchAll(paramRegex)]
const uniqueParams = [...new Set(matches.map((match) => match[1]))]
@ -124,14 +128,24 @@ export const TemplateEditor: React.FC<TemplateEditorProps> = ({
}))
}
const updateParameter = (paramId: string, updates: Partial<ReportParameterDto>) => {
setFormData((prev) => ({
...prev,
parameters: prev.parameters.map((param) =>
param.id === paramId ? { ...param, ...updates } : param
),
}))
}
const tabs = [
{ id: 'info', label: 'Şablon Bilgileri', icon: FileText },
{ id: 'content', label: 'HTML İçerik', icon: Code },
{ id: 'info', label: translate('::Şablon Bilgileri'), icon: FileText },
{ id: 'parameters', label: translate('::Parametreler'), icon: Settings },
{ id: 'content', label: translate('::HTML İçerik'), icon: Code },
]
return (
<>
<Dialog isOpen={isOpen} onClose={onClose} width="60%">
<Dialog isOpen={isOpen} onClose={onClose} width="100%">
<h5 className="mb-4">{template ? 'Şablon Düzenle' : 'Yeni Şablon Oluştur'}</h5>
<div className="flex flex-col h-full">
{/* Tab Navigation */}
@ -142,7 +156,7 @@ export const TemplateEditor: React.FC<TemplateEditorProps> = ({
return (
<button
key={tab.id}
onClick={() => setActiveTab(tab.id as 'info' | 'content')}
onClick={() => setActiveTab(tab.id as 'info' | 'content' | 'parameters')}
className={`
flex items-center py-4 px-1 border-b-2 font-medium text-sm transition-colors
${
@ -163,10 +177,16 @@ export const TemplateEditor: React.FC<TemplateEditorProps> = ({
{/* Tab Content */}
<div className="flex-1 flex flex-col min-h-0">
{activeTab === 'info' && (
<div className="overflow-y-auto flex-1 p-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-full">
<div className="space-y-4">
<Input
<div className="overflow-y-auto flex-1 p-3">
<div className="max-w-6xl mx-auto">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* Left Column - Basic Info */}
<div className="space-y-6">
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Şablon Adı
</label>
<input
autoFocus
value={formData.name}
onChange={(e) =>
@ -176,50 +196,37 @@ export const TemplateEditor: React.FC<TemplateEditorProps> = ({
}))
}
placeholder="Rapor şablonu adı"
className="text-left"
/>
<Input
value={formData.description}
onChange={(e) =>
setFormData((prev) => ({
...prev,
description: e.target.value,
}))
}
placeholder="Şablon açıklaması"
textArea={true}
rows={3}
className="text-left"
className="w-full flex-1 px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium text-gray-700 mb-2">
Kategori
</label>
<select
value={formData.category}
value={formData.categoryName}
onChange={(e) =>
setFormData((prev) => ({
...prev,
category: e.target.value,
categoryName: e.target.value,
}))
}
className="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
>
<option value="Genel">Genel</option>
<option value="Finansal">Finansal</option>
<option value="İnsan Kaynakları">İnsan Kaynakları</option>
<option value="Satış">Satış</option>
<option value="Operasyonel">Operasyonel</option>
{categories.map((category) => (
<option key={category.id} value={category.name}>
{category.name}
</option>
))}
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium text-gray-700 mb-2">
Etiketler
</label>
<div className="flex space-x-2 mb-2">
<div className="flex space-x-2 mb-3">
<input
type="text"
value={tagInput}
@ -236,12 +243,12 @@ export const TemplateEditor: React.FC<TemplateEditorProps> = ({
{formData.tags.map((tag) => (
<span
key={tag}
className="inline-flex items-center px-2 py-1 text-sm bg-blue-100 text-blue-800 rounded-full"
className="inline-flex items-center px-3 py-1 text-sm bg-blue-100 text-blue-800 rounded-full"
>
{tag}
<button
onClick={() => removeTag(tag)}
className="ml-1 text-blue-600 hover:text-blue-800"
className="ml-2 text-blue-600 hover:text-blue-800"
>
<X className="h-3 w-3" />
</button>
@ -251,63 +258,137 @@ export const TemplateEditor: React.FC<TemplateEditorProps> = ({
</div>
</div>
<div className="bg-gray-50 rounded-lg p-4 flex flex-col">
<h3 className="font-medium text-gray-900 mb-4 flex-shrink-0">
Algılanan Parametreler
</h3>
{formData.parameters.length === 0 ? (
<p className="text-gray-500 text-sm">
HTML içeriğinde @@PARAMETRE formatında parametreler kullandığınızda burada
görünecek.
</p>
) : (
<div className="flex-1 overflow-y-auto max-h-80">
<div className="grid grid-cols-1 gap-3 pr-2">
{formData.parameters.map((param) => (
<div
key={param.id}
className="bg-white p-4 rounded-lg border border-gray-200 shadow-sm hover:shadow-md transition-shadow"
>
<div className="flex items-start justify-between mb-2">
<div className="flex items-center space-x-2">
<div className="w-2 h-2 bg-blue-500 rounded-full"></div>
<code className="text-sm font-mono text-blue-700 bg-blue-50 px-2 py-1 rounded">
@@{param.name}
</code>
</div>
<span className="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
{param.type}
</span>
</div>
<p className="text-sm text-gray-600 text-left">{param.description}</p>
</div>
))}
{/* Right Column - Description */}
<div className="space-y-6">
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Şablon Açıklaması
</label>
<Input
value={formData.description}
onChange={(e) =>
setFormData((prev) => ({
...prev,
description: e.target.value,
}))
}
placeholder="Şablon hakkında detaylı açıklama yazın..."
textArea={true}
rows={12}
className="text-left h-full"
/>
</div>
</div>
)}
</div>
</div>
</div>
)}
{activeTab === 'content' && (
<div className="flex-1 flex flex-col p-6 min-h-0">
<div className="flex-1 flex flex-col min-h-0">
<div className="flex-1 p-3 min-h-0">
<ReportHtmlEditor
value={formData.htmlContent}
onChange={(content) => setFormData((prev) => ({ ...prev, htmlContent: content }))}
height="80%"
onChange={(content) =>
setFormData((prev) => ({ ...prev, htmlContent: content }))
}
height="50vh"
/>
</div>
</div>
)}
{activeTab === 'parameters' && (
<div className="overflow-y-auto flex-1 p-6">
<div className="max-w-full mx-auto">
{formData.parameters.length === 0 ? (
<div className="text-center py-12">
<Settings className="h-16 w-16 text-gray-400 mx-auto mb-4" />
<p className="text-gray-500 text-lg mb-2">Henüz parametre algılanmadı</p>
<p className="text-gray-400 text-sm">
HTML içeriğinde @@PARAMETRE formatında parametreler kullandığınızda burada
görünecek.
</p>
</div>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{formData.parameters.map((param) => (
<div
key={param.id}
className="bg-white p-3 rounded-lg border border-gray-200 shadow-sm hover:shadow-md transition-shadow min-w-0"
>
<div className="flex items-start justify-between mb-2 min-w-0">
<div className="flex items-center gap-1 min-w-0 flex-1">
<div className="w-2 h-2 bg-blue-500 rounded-full flex-shrink-0"></div>
<code className="text-xs font-mono text-blue-700 bg-blue-50 px-1.5 py-0.5 rounded truncate">
@@{param.name}
</code>
</div>
<select
value={param.type}
onChange={(e) => updateParameter(param.id, { type: e.target.value as any })}
className="text-xs bg-gray-100 text-gray-600 px-1.5 py-0.5 rounded-full flex-shrink-0 ml-1 border-none outline-none cursor-pointer"
>
<option value="text">text</option>
<option value="number">number</option>
<option value="date">date</option>
<option value="select">select</option>
<option value="checkbox">checkbox</option>
</select>
</div>
<div className="mb-2">
<input
type="text"
value={param.description || ''}
onChange={(e) => updateParameter(param.id, { description: e.target.value })}
placeholder="Parametre açıklaması"
className="w-full text-xs text-gray-600 bg-transparent border-none outline-none resize-none"
/>
</div>
<div className="mb-2">
<input
type="text"
value={param.defaultValue || ''}
onChange={(e) => updateParameter(param.id, { defaultValue: e.target.value })}
placeholder="Varsayılan değer"
className="w-full text-xs bg-gray-50 px-1.5 py-0.5 rounded border border-gray-200 outline-none"
/>
</div>
<div className="flex items-center gap-2">
<label className="flex items-center gap-1 cursor-pointer">
<input
type="checkbox"
checked={param.required}
onChange={(e) => updateParameter(param.id, { required: e.target.checked })}
className="w-3 h-3 text-red-600 rounded border-gray-300 focus:ring-red-500"
/>
<span className="text-xs text-gray-600">Zorunlu</span>
</label>
</div>
</div>
))}
</div>
)}
</div>
</div>
)}
</div>
{/* Tab Footer */}
<div className="flex justify-between">
<Button variant="solid" onClick={onClose} disabled={isSaving}>
<Button variant="default" onClick={onClose} disabled={isSaving}>
İptal
</Button>
<Button onClick={handleSave} disabled={isSaving}>
<Save className="h-4 w-4 mr-2" />
<Button
variant="solid"
onClick={handleSave}
className="bg-blue-600 hover:bg-blue-700 font-medium px-2 py-2 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 flex items-center space-x-2"
>
<Save className="h-5 w-5" />
{isSaving ? 'Kaydediliyor...' : template ? 'Güncelle' : 'Kaydet'}
</Button>
</div>

2
ui/src/components/template/Footer.tsx
View file

@ -68,7 +68,7 @@ const FooterContent = () => {
export default function Footer({ pageContainerType = 'contained' }: FooterProps) {
return (
<footer
className={classNames(`footer flex flex-auto items-center h-6 ${PAGE_CONTAINER_GUTTER_X}`)}
className={classNames(`print:hidden footer flex flex-auto items-center h-6 ${PAGE_CONTAINER_GUTTER_X}`)}
>
{pageContainerType === 'contained' ? (
<Container>

2
ui/src/proxy/reports/models.ts
View file

@ -95,7 +95,7 @@ export interface GetReportTemplatesInput {
maxResultCount?: number
sorting?: string
filter?: string
category?: string
categoryName?: string
}
export interface GetReportsGeneratedInput {

2
ui/src/services/reports.service.ts
View file

@ -37,6 +37,8 @@ export class ReportsService {
sorting: input.sorting,
skipCount: input.skipCount,
maxResultCount: input.maxResultCount,
filter: input.filter,
categoryName: input.categoryName,
},
},
{ apiName: this.apiName },

4
ui/src/utils/hooks/useReports.ts
View file

@ -92,6 +92,8 @@ export const useReports = () => {
const currentTemplateResponse = await reportsService.getTemplateById(id)
const currentTemplate = currentTemplateResponse.data as ReportTemplateDto
console.log('Current Template:', currentTemplate)
const updatedTemplate = { ...currentTemplate, ...updates }
await reportsService.updateTemplate(id, updatedTemplate)
@ -196,7 +198,7 @@ export const useReports = () => {
sorting: '',
skipCount: 0,
maxResultCount: 1000,
category: categoryName && categoryName !== 'Tümü' ? categoryName : undefined,
categoryName: categoryName && categoryName !== 'Tümü' ? categoryName : undefined,
})
setData((prevData) => ({