poyrazavsever/neta
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: improve mobile responsiveness and layout consistency across dashboard views by adding horizontal scrolling and unifying Sidebar components.

Browse Source
This commit is contained in:
poyrazavsever
2026-06-09 16:01:38 +03:00
parent f69c4a68ba
commit 3d899c07fe
12 changed files with 161 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(dashboard)/calendar/calendar-client.tsx
+11 -7
View File
@@ -133,14 +133,16 @@ export function CalendarClient({ events, clients, projects, tasks }: CalendarCli
</div>
</div>
<div className="grid grid-cols-7 border border-border text-center text-xs font-medium uppercase text-muted-foreground">
{["Pzt", "Sal", "Çar", "Per", "Cum", "Cmt", "Paz"].map((day) => (
<div key={day} className="border-r border-border px-2 py-2 last:border-r-0">
{day}
<div className="overflow-x-auto pb-4">
<div className="min-w-[600px]">
<div className="grid grid-cols-7 border border-border text-center text-xs font-medium uppercase text-muted-foreground">
{["Pzt", "Sal", "Çar", "Per", "Cum", "Cmt", "Paz"].map((day) => (
<div key={day} className="border-r border-border px-2 py-2 last:border-r-0">
{day}
</div>
))}
</div>
))}
</div>
<div className="grid grid-cols-7 border-x border-border">
<div className="grid grid-cols-7 border-x border-border">
{days.map((day) => {
const dayEvents = eventsByDay.get(day.key) || [];
const isSelected = selectedDate === day.key;
@@ -173,6 +175,8 @@ export function CalendarClient({ events, clients, projects, tasks }: CalendarCli
</button>
);
})}
</div>
</div>
</div>
</CardContent>
</Card>
app/(dashboard)/chat/page.tsx
+2 -2
View File
@@ -242,7 +242,7 @@ export default function AIChatPage() {
className={`flex ${message.role === "user" ? "justify-end" : "justify-start"}`}
>
<div
className={`max-w-[85%] rounded-sm px-4 py-3 text-sm ${
className={`max-w-[92%] md:max-w-[85%] rounded-sm px-4 py-3 text-sm ${
message.role === "user"
? "bg-primary text-primary-foreground"
: "border border-border bg-muted/40 text-foreground"
@@ -264,7 +264,7 @@ export default function AIChatPage() {
<div ref={messagesEndRef} />
</div>
<form onSubmit={handleSubmit} className="border-t border-border p-4">
<form onSubmit={handleSubmit} className="border-t border-border p-4 shrink-0">
<div className="mx-auto flex max-w-4xl items-end gap-2 rounded-sm border border-border bg-background p-2 focus-within:border-primary">
<textarea
value={input}
app/(dashboard)/clients/clients-client.tsx
+17 -15
View File
@@ -250,19 +250,21 @@ export function ClientsClient({
<TabsContent value="list" className="mt-0">
{filteredClients.length > 0 ? (
<div className="overflow-hidden">
<div className="hidden grid-cols-[1.5fr_1fr_1fr_1fr_0.8fr_0.8fr] gap-4 border-b border-border px-4 py-3 text-xs font-medium uppercase text-muted-foreground lg:grid">
<span>Müşteri</span>
<span>İletişim</span>
<span>Aşama</span>
<span>Follow-up</span>
<span>Projeler</span>
<span className="text-right">İşlem</span>
</div>
<div className="divide-y divide-border">
{filteredClients.map((client) => (
<ClientRow key={client.id} client={client} />
))}
<div className="overflow-x-auto rounded-sm border border-border">
<div className="min-w-[900px]">
<div className="grid grid-cols-[1.5fr_1fr_1fr_1fr_0.8fr_0.8fr] gap-4 border-b border-border bg-muted/40 px-4 py-3 text-xs font-medium uppercase text-muted-foreground">
<span>Müşteri</span>
<span>İletişim</span>
<span>Aşama</span>
<span>Follow-up</span>
<span>Projeler</span>
<span className="text-right">İşlem</span>
</div>
<div className="divide-y divide-border">
{filteredClients.map((client) => (
<ClientRow key={client.id} client={client} />
))}
</div>
</div>
</div>
) : (
@@ -351,7 +353,7 @@ function ClientRow({ client }: { client: ClientListItem }) {
const stage = pipelineStages.find(s => s.id === client.pipeline_stage) || pipelineStages[0];
return (
<div className="grid gap-4 px-4 py-4 lg:grid-cols-[1.5fr_1fr_1fr_1fr_0.8fr_0.8fr] lg:items-center">
<div className="grid gap-4 px-4 py-4 grid-cols-[1.5fr_1fr_1fr_1fr_0.8fr_0.8fr] items-center">
<div className="min-w-0">
<div className="flex items-center gap-3">
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-sm bg-primary/10 text-sm font-semibold text-primary">
@@ -406,7 +408,7 @@ function ClientRow({ client }: { client: ClientListItem }) {
<div className="text-muted-foreground">{formatCurrency(client.revenueTotal)}</div>
</div>
<div className="flex justify-start gap-2 lg:justify-end">
<div className="flex justify-end gap-2">
<Link href={`/clients/${client.id}`}>
<Button variant="ghost" className="h-9 w-9 p-0">
<ArrowRight className="h-4 w-4" />
app/(dashboard)/documents/page.tsx
+15 -13
View File
@@ -206,14 +206,15 @@ export default function DocumentsPage() {
))}
</div>
) : (
<div className="bg-[#0A0710] border border-white/5 rounded-sm overflow-hidden shadow-2xl mb-8">
<div className="grid grid-cols-12 gap-4 p-5 border-b border-white/5 bg-[#0F0B15]/50 text-[9px] font-black uppercase tracking-[0.3em] text-muted-foreground">
<div className="col-span-6 px-2">Document Name</div>
<div className="col-span-2">File Weight</div>
<div className="col-span-2">Ownership</div>
<div className="col-span-2 text-right">Strategic Date</div>
</div>
<div className="divide-y divide-white/5">
<div className="overflow-x-auto bg-[#0A0710] border border-white/5 rounded-sm shadow-2xl mb-8">
<div className="min-w-[800px]">
<div className="grid grid-cols-12 gap-4 p-5 border-b border-white/5 bg-[#0F0B15]/50 text-[9px] font-black uppercase tracking-[0.3em] text-muted-foreground">
<div className="col-span-6 px-2">Document Name</div>
<div className="col-span-2">File Weight</div>
<div className="col-span-2">Ownership</div>
<div className="col-span-2 text-right">Strategic Date</div>
</div>
<div className="divide-y divide-white/5">
{documents.map(doc => (
<div key={doc.id} onClick={() => setSelectedDoc(doc)} className="grid grid-cols-12 gap-4 p-6 items-center hover:bg-white/[0.02] transition-all group cursor-pointer border-l-2 border-transparent hover:border-primary">
<div className="col-span-6 flex items-center gap-5">
@@ -226,11 +227,12 @@ export default function DocumentsPage() {
</div>
</div>
</div>
<div className="col-span-2 text-[11px] text-muted-foreground font-black uppercase tracking-tighter">{doc.size}</div>
<div className="col-span-2 text-[11px] text-muted-foreground font-black uppercase tracking-widest">{doc.owner}</div>
<div className="col-span-2 text-right text-[11px] text-muted-foreground font-black uppercase tracking-tighter">{doc.date.split(',')[0]}</div>
</div>
))}
<div className="col-span-2 text-[11px] text-muted-foreground font-black uppercase tracking-tighter">{doc.size}</div>
<div className="col-span-2 text-[11px] text-muted-foreground font-black uppercase tracking-widest">{doc.owner}</div>
<div className="col-span-2 text-right text-[11px] text-muted-foreground font-black uppercase tracking-tighter">{doc.date.split(',')[0]}</div>
</div>
))}
</div>
</div>
</div>
)}
app/(dashboard)/finance/finance-client.tsx
+39 -14
View File
@@ -170,15 +170,16 @@ export function FinanceClient({ transactions, clients, projects }: FinanceClient
</div>
{filteredTransactions.length > 0 ? (
<div className="overflow-hidden rounded-sm border border-border">
<div className="hidden grid-cols-[1.4fr_0.8fr_0.8fr_0.8fr_1fr] gap-4 border-b border-border bg-muted/40 px-4 py-3 text-xs font-medium uppercase text-muted-foreground lg:grid">
<span>İşlem</span>
<span>Tarih</span>
<span>Tutar</span>
<span>Durum</span>
<span className="text-right">İşlem</span>
</div>
<div className="divide-y divide-border">
<div className="overflow-x-auto rounded-sm border border-border">
<div className="min-w-[800px]">
<div className="grid grid-cols-[1.4fr_0.8fr_0.8fr_0.8fr_1fr] gap-4 border-b border-border bg-muted/40 px-4 py-3 text-xs font-medium uppercase text-muted-foreground">
<span>İşlem</span>
<span>Tarih</span>
<span>Tutar</span>
<span>Durum</span>
<span className="text-right">İşlem</span>
</div>
<div className="divide-y divide-border">
{filteredTransactions.map((transaction) => (
<TransactionRow
key={transaction.id}
@@ -187,6 +188,7 @@ export function FinanceClient({ transactions, clients, projects }: FinanceClient
projects={projects}
/>
))}
</div>
</div>
</div>
) : (
@@ -240,7 +242,7 @@ function TransactionRow({
const isIncome = transaction.type === "income";
return (
<div className="grid gap-4 px-4 py-4 lg:grid-cols-[1.4fr_0.8fr_0.8fr_0.8fr_1fr] lg:items-center">
<div className="grid gap-4 px-4 py-4 grid-cols-[1.4fr_0.8fr_0.8fr_0.8fr_1fr] items-center">
<div className="flex min-w-0 items-start gap-3">
<div className={isIncome ? "rounded-sm bg-emerald-50 p-2 text-emerald-700" : "rounded-sm bg-rose-50 p-2 text-rose-700"}>
{isIncome ? <ArrowUpRight className="h-4 w-4" /> : <ArrowDownRight className="h-4 w-4" />}
@@ -264,7 +266,7 @@ function TransactionRow({
{paymentStatusLabels[transaction.payment_status]}
</Badge>
</div>
<div className="flex justify-start gap-2 lg:justify-end">
<div className="flex justify-end gap-2">
<FinanceDialog mode="edit" transaction={transaction} clients={clients} projects={projects} />
<form action={deleteFinanceTransactionRecord}>
<input type="hidden" name="id" value={transaction.id} />
@@ -542,6 +544,29 @@ function calculateSummary(transactions: FinanceTransactionItem[]) {
);
}
function formatMessageContent(text: string) {
if (!text) return null;
const lines = text.split("\n");
return lines.map((line, i) => (
<span key={i}>
{line.split(/(\*\*.*?\*\*|\*.*?\*)/g).map((part, j) => {
if (part.startsWith("**") && part.endsWith("**")) {
return (
<strong key={j} className="font-semibold text-foreground">
{part.slice(2, -2)}
</strong>
);
}
if (part.startsWith("*") && part.endsWith("*")) {
return <em key={j}>{part.slice(1, -1)}</em>;
}
return <span key={j}>{part}</span>;
})}
{i !== lines.length - 1 && <br />}
</span>
));
}
function AIFinanceDialog() {
const [open, setOpen] = useState(false);
const [loading, setLoading] = useState(false);
@@ -572,7 +597,7 @@ function AIFinanceDialog() {
AI Analizi
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-2xl max-h-[80vh] overflow-y-auto">
<DialogContent className="w-[calc(100vw-2rem)] sm:max-w-2xl max-h-[80vh] overflow-y-auto rounded-lg p-6">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Brain className="h-5 w-5 text-indigo-600" />
@@ -602,13 +627,13 @@ function AIFinanceDialog() {
{result && (
<div className="bg-muted/50 border border-border rounded-lg p-5 text-sm prose prose-sm dark:prose-invert max-w-none whitespace-pre-wrap">
{result}
{formatMessageContent(result)}
</div>
)}
</div>
{result && (
<DialogFooter>
<DialogFooter className="gap-2 sm:gap-0">
<Button variant="outline" onClick={() => setOpen(false)}>Kapat</Button>
<Button variant="default" onClick={handleAnalyze} className="gap-2">
<Brain className="h-4 w-4" />
app/(dashboard)/journal/journal-client.tsx
+12 -10
View File
@@ -194,18 +194,20 @@ export function JournalClient({ logs }: JournalClientProps) {
</div>
{logs.length > 0 ? (
<div className="overflow-hidden rounded-sm border border-border">
<div className="hidden grid-cols-[0.7fr_0.7fr_0.7fr_1.8fr_0.8fr] gap-4 border-b border-border bg-muted/40 px-4 py-3 text-xs font-medium uppercase text-muted-foreground lg:grid">
<span>Tarih</span>
<span>Mood</span>
<span>Enerji</span>
<span>Not</span>
<span className="text-right">İşlem</span>
</div>
<div className="divide-y divide-border">
<div className="overflow-x-auto rounded-sm border border-border">
<div className="min-w-[800px]">
<div className="grid grid-cols-[0.7fr_0.7fr_0.7fr_1.8fr_0.8fr] gap-4 border-b border-border bg-muted/40 px-4 py-3 text-xs font-medium uppercase text-muted-foreground">
<span>Tarih</span>
<span>Mood</span>
<span>Enerji</span>
<span>Not</span>
<span className="text-right">İşlem</span>
</div>
<div className="divide-y divide-border">
{logs.map((log) => (
<DailyLogRow key={log.id} log={log} />
))}
</div>
</div>
</div>
) : (
@@ -219,7 +221,7 @@ export function JournalClient({ logs }: JournalClientProps) {
function DailyLogRow({ log }: { log: DailyLogItem }) {
return (
<div className="grid gap-4 px-4 py-4 lg:grid-cols-[0.7fr_0.7fr_0.7fr_1.8fr_0.8fr] lg:items-center">
<div className="grid gap-4 px-4 py-4 grid-cols-[0.7fr_0.7fr_0.7fr_1.8fr_0.8fr] items-center">
<div>
<div className="font-medium text-foreground">{formatDate(log.log_date)}</div>
<div className="text-xs text-muted-foreground">{formatWeekday(log.log_date)}</div>
app/(dashboard)/projects/projects-client.tsx
+16 -14
View File
@@ -187,18 +187,20 @@ export function ProjectsClient({ projects, clients }: ProjectsClientProps) {
))}
</div>
) : (
<div className="overflow-hidden rounded-sm border border-border">
<div className="hidden grid-cols-[1.5fr_1fr_1fr_0.8fr_1fr] gap-4 border-b border-border bg-muted/40 px-4 py-3 text-xs font-medium uppercase text-muted-foreground lg:grid">
<span>Proje</span>
<span>Tür</span>
<span>Durum</span>
<span>İlerleme</span>
<span className="text-right">İşlem</span>
</div>
<div className="divide-y divide-border">
{filteredProjects.map((project) => (
<ProjectRow key={project.id} project={project} clients={clients} />
))}
<div className="overflow-x-auto rounded-sm border border-border">
<div className="min-w-[800px]">
<div className="grid grid-cols-[1.5fr_1fr_1fr_0.8fr_1fr] gap-4 border-b border-border bg-muted/40 px-4 py-3 text-xs font-medium uppercase text-muted-foreground">
<span>Proje</span>
<span>Tür</span>
<span>Durum</span>
<span>İlerleme</span>
<span className="text-right">İşlem</span>
</div>
<div className="divide-y divide-border">
{filteredProjects.map((project) => (
<ProjectRow key={project.id} project={project} clients={clients} />
))}
</div>
</div>
</div>
)
@@ -292,7 +294,7 @@ function ProjectRow({
clients: ProjectClientOption[];
}) {
return (
<div className="grid gap-4 px-4 py-4 lg:grid-cols-[1.5fr_1fr_1fr_0.8fr_1fr] lg:items-center">
<div className="grid gap-4 px-4 py-4 grid-cols-[1.5fr_1fr_1fr_0.8fr_1fr] items-center">
<div className="min-w-0">
<div className="font-medium text-foreground">{project.name}</div>
<div className="truncate text-sm text-muted-foreground">
@@ -306,7 +308,7 @@ function ProjectRow({
<div>
<ProgressBar progress={project.progress} compact />
</div>
<div className="flex justify-start lg:justify-end">
<div className="flex justify-end gap-2">
<ProjectActions project={project} clients={clients} showDetail />
</div>
</div>
app/(dashboard)/settings/page.tsx
+2 -2
View File
@@ -144,14 +144,14 @@ export default function SettingsPage() {
<div className="flex flex-col md:flex-row gap-8 flex-1 min-h-0 pb-12">
{/* Settings Sidebar */}
<div className="w-full md:w-64 flex flex-col gap-1 shrink-0">
<div className="w-full md:w-64 flex overflow-x-auto md:flex-col gap-2 shrink-0 pb-2 md:pb-0 tiny-scrollbar">
{tabs.map((tab) => {
const Icon = tab.icon;
return (
<button
key={tab.name}
onClick={() => setActiveTab(tab.name)}
className={`flex items-center gap-3 px-4 py-3 rounded-md text-sm font-medium transition-colors text-left ${
className={`flex shrink-0 items-center gap-3 px-4 py-3 rounded-md text-sm font-medium transition-colors text-left ${
activeTab === tab.name
? "bg-primary/10 text-primary"
: "text-muted-foreground hover:bg-muted hover:text-foreground"
app/(dashboard)/tasks/tasks-client.tsx
+12 -10
View File
@@ -236,18 +236,20 @@ function TaskList({
projects: TaskRelationOption[];
}) {
return (
<div className="overflow-hidden rounded-sm border border-border">
<div className="hidden grid-cols-[1.5fr_1fr_1fr_0.8fr_1fr] gap-4 border-b border-border bg-muted/40 px-4 py-3 text-xs font-medium uppercase text-muted-foreground lg:grid">
<span>Görev</span>
<span>Bağlantı</span>
<span>Öncelik</span>
<span>Son tarih</span>
<span className="text-right">İşlem</span>
</div>
<div className="divide-y divide-border">
<div className="overflow-x-auto rounded-sm border border-border">
<div className="min-w-[800px]">
<div className="grid grid-cols-[1.5fr_1fr_1fr_0.8fr_1fr] gap-4 border-b border-border bg-muted/40 px-4 py-3 text-xs font-medium uppercase text-muted-foreground">
<span>Görev</span>
<span>Bağlantı</span>
<span>Öncelik</span>
<span>Son tarih</span>
<span className="text-right">İşlem</span>
</div>
<div className="divide-y divide-border">
{tasks.map((task) => (
<TaskRow key={task.id} task={task} clients={clients} projects={projects} />
))}
</div>
</div>
</div>
);
@@ -263,7 +265,7 @@ function TaskRow({
projects: TaskRelationOption[];
}) {
return (
<div className="grid gap-4 px-4 py-4 lg:grid-cols-[1.5fr_1fr_1fr_0.8fr_1fr] lg:items-center">
<div className="grid gap-4 px-4 py-4 grid-cols-[1.5fr_1fr_1fr_0.8fr_1fr] items-center">
<div className="min-w-0">
<div className={task.status === "done" ? "font-medium text-muted-foreground line-through" : "font-medium text-foreground"}>
{task.title}
app/(dashboard)/time/page.tsx
+3 -2
View File
@@ -137,8 +137,8 @@ export default function TimeTrackingPage() {
<h3 className="text-[10px] font-black uppercase tracking-[0.3em] text-muted-foreground">Today's Activity Ledger</h3>
<button className="text-[10px] font-bold text-primary uppercase tracking-widest">Full History</button>
</div>
<div className="flex-1 overflow-y-auto tiny-scrollbar">
<div className="divide-y divide-white/5">
<div className="flex-1 overflow-y-auto overflow-x-auto tiny-scrollbar">
<div className="min-w-[600px] divide-y divide-white/5">
{recentLogs.map(log => (
<div key={log.id} className="grid grid-cols-12 gap-4 p-5 items-center hover:bg-white/[0.02] transition-all group">
<div className="col-span-5 flex items-center gap-4">
@@ -155,6 +155,7 @@ export default function TimeTrackingPage() {
</div>
</div>
))}
</div>
</div>
</div>
</div>