Refactor: Replace sidebar component
Replaced the existing sidebar with a new implementation for improved mobile compatibility and functionality. Also, addressed the webhook issue and provided guidance on manual verification.
This commit is contained in:
gpt-engineer-app[bot]
parent
a7e5c700ab
commit
87b6669e50
@ -93,7 +93,7 @@ const ContactForm = ({ onBack }: ContactFormProps) => {
|
|||||||
try {
|
try {
|
||||||
console.log("Enviando dados para webhook N8N:", webhookData);
|
console.log("Enviando dados para webhook N8N:", webhookData);
|
||||||
|
|
||||||
const response = await fetch('https://webhookn8n.innova1001.com.br/webhook/faleconosco', {
|
const webhookResponse = await fetch('https://webhookn8n.innova1001.com.br/webhook/faleconosco', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
@ -101,11 +101,16 @@ const ContactForm = ({ onBack }: ContactFormProps) => {
|
|||||||
body: JSON.stringify(webhookData),
|
body: JSON.stringify(webhookData),
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!response.ok) {
|
console.log("Status da resposta do webhook:", webhookResponse.status);
|
||||||
throw new Error(`HTTP error! status: ${response.status}`);
|
|
||||||
|
if (webhookResponse.ok) {
|
||||||
|
const responseText = await webhookResponse.text();
|
||||||
|
console.log("Resposta do webhook:", responseText);
|
||||||
|
} else {
|
||||||
|
console.error("Erro no webhook - Status:", webhookResponse.status);
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log("Dados do Fale Conosco enviados com sucesso para o webhook N8N");
|
console.log("Dados do Fale Conosco enviados para o webhook N8N");
|
||||||
} catch (webhookError) {
|
} catch (webhookError) {
|
||||||
console.error("Erro ao enviar para webhook N8N:", webhookError);
|
console.error("Erro ao enviar para webhook N8N:", webhookError);
|
||||||
// Não interrompe o fluxo se o webhook falhar
|
// Não interrompe o fluxo se o webhook falhar
|
||||||
|
|||||||
@ -3,7 +3,7 @@ import { useState } from 'react';
|
|||||||
import { useIsMobile } from '@/hooks/use-mobile';
|
import { useIsMobile } from '@/hooks/use-mobile';
|
||||||
import Header from './Header';
|
import Header from './Header';
|
||||||
import Sidebar from './Sidebar';
|
import Sidebar from './Sidebar';
|
||||||
import ModernLayout from './ModernLayout';
|
import NewModernLayout from './NewModernLayout';
|
||||||
import OnboardingTour from '@/components/onboarding/OnboardingTour';
|
import OnboardingTour from '@/components/onboarding/OnboardingTour';
|
||||||
import HelpIcon from '@/components/help/HelpIcon';
|
import HelpIcon from '@/components/help/HelpIcon';
|
||||||
import { useOnboardingTour } from '@/hooks/useOnboardingTour';
|
import { useOnboardingTour } from '@/hooks/useOnboardingTour';
|
||||||
@ -27,7 +27,7 @@ export default function Layout({ children, useModernSidebar = true }: LayoutProp
|
|||||||
|
|
||||||
// Se useModernSidebar for true, usa o novo layout moderno
|
// Se useModernSidebar for true, usa o novo layout moderno
|
||||||
if (useModernSidebar) {
|
if (useModernSidebar) {
|
||||||
return <ModernLayout>{children}</ModernLayout>;
|
return <NewModernLayout>{children}</NewModernLayout>;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Layout antigo para compatibilidade
|
// Layout antigo para compatibilidade
|
||||||
|
|||||||
228
src/components/layout/NewModernLayout.tsx
Normal file
228
src/components/layout/NewModernLayout.tsx
Normal file
@ -0,0 +1,228 @@
|
|||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { Link, useLocation } from 'react-router-dom';
|
||||||
|
import {
|
||||||
|
Sidebar,
|
||||||
|
SidebarProvider,
|
||||||
|
SidebarContent,
|
||||||
|
SidebarGroup,
|
||||||
|
SidebarGroupLabel,
|
||||||
|
SidebarGroupContent,
|
||||||
|
SidebarMenu,
|
||||||
|
SidebarMenuItem,
|
||||||
|
SidebarMenuButton,
|
||||||
|
SidebarHeader,
|
||||||
|
SidebarFooter,
|
||||||
|
SidebarTrigger,
|
||||||
|
SidebarInset,
|
||||||
|
} from "@/components/ui/sidebar";
|
||||||
|
import {
|
||||||
|
Home,
|
||||||
|
Receipt,
|
||||||
|
CreditCard,
|
||||||
|
ListFilter,
|
||||||
|
Target,
|
||||||
|
Calendar,
|
||||||
|
Crown,
|
||||||
|
MessageSquareText,
|
||||||
|
Users,
|
||||||
|
Settings
|
||||||
|
} from 'lucide-react';
|
||||||
|
import OnboardingTour from '@/components/onboarding/OnboardingTour';
|
||||||
|
import HelpIcon from '@/components/help/HelpIcon';
|
||||||
|
import { useOnboardingTour } from '@/hooks/useOnboardingTour';
|
||||||
|
|
||||||
|
interface NewModernLayoutProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Logo = () => {
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
to="/"
|
||||||
|
className="relative z-20 flex items-center space-x-2 py-1 text-sm font-normal text-black"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/lovable-uploads/7149adf3-440a-491e-83c2-d964a3348cc9.png"
|
||||||
|
alt="Finance Home Logo"
|
||||||
|
className="h-8 w-8 shrink-0"
|
||||||
|
/>
|
||||||
|
<span className="font-medium whitespace-pre text-blue-700 dark:text-white">
|
||||||
|
Finance Home
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function NewModernLayout({ children }: NewModernLayoutProps) {
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
const {
|
||||||
|
isOpen: tourOpen,
|
||||||
|
currentStep,
|
||||||
|
nextStep,
|
||||||
|
skipTour,
|
||||||
|
closeTour
|
||||||
|
} = useOnboardingTour();
|
||||||
|
|
||||||
|
const mainItems = [
|
||||||
|
{
|
||||||
|
title: "Dashboard",
|
||||||
|
url: "/",
|
||||||
|
icon: Home,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Transações",
|
||||||
|
url: "/transacoes",
|
||||||
|
icon: Receipt,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Cartões de Crédito",
|
||||||
|
url: "/cartoes",
|
||||||
|
icon: CreditCard,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Categorias",
|
||||||
|
url: "/categorias",
|
||||||
|
icon: ListFilter,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Metas",
|
||||||
|
url: "/metas",
|
||||||
|
icon: Target,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Calendário",
|
||||||
|
url: "/calendario",
|
||||||
|
icon: Calendar,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Assinatura",
|
||||||
|
url: "/assinatura",
|
||||||
|
icon: Crown,
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const whatsappItems = [
|
||||||
|
{
|
||||||
|
title: "Conectar WhatsApp",
|
||||||
|
url: "/whatsapp",
|
||||||
|
icon: MessageSquareText,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Grupos",
|
||||||
|
url: "/grupos-whatsapp",
|
||||||
|
icon: Users,
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const configItems = [
|
||||||
|
{
|
||||||
|
title: "Configurações",
|
||||||
|
url: "/configuracoes",
|
||||||
|
icon: Settings,
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-background flex w-full">
|
||||||
|
<SidebarProvider defaultOpen={false}>
|
||||||
|
<Sidebar>
|
||||||
|
<SidebarHeader>
|
||||||
|
<Logo />
|
||||||
|
</SidebarHeader>
|
||||||
|
|
||||||
|
<SidebarContent>
|
||||||
|
<SidebarGroup>
|
||||||
|
<SidebarGroupLabel>Principal</SidebarGroupLabel>
|
||||||
|
<SidebarGroupContent>
|
||||||
|
<SidebarMenu>
|
||||||
|
{mainItems.map((item) => (
|
||||||
|
<SidebarMenuItem key={item.title}>
|
||||||
|
<SidebarMenuButton
|
||||||
|
asChild
|
||||||
|
tooltip={item.title}
|
||||||
|
isActive={location.pathname === item.url}
|
||||||
|
>
|
||||||
|
<Link to={item.url}>
|
||||||
|
<item.icon />
|
||||||
|
<span>{item.title}</span>
|
||||||
|
</Link>
|
||||||
|
</SidebarMenuButton>
|
||||||
|
</SidebarMenuItem>
|
||||||
|
))}
|
||||||
|
</SidebarMenu>
|
||||||
|
</SidebarGroupContent>
|
||||||
|
</SidebarGroup>
|
||||||
|
|
||||||
|
<SidebarGroup>
|
||||||
|
<SidebarGroupLabel>WhatsApp</SidebarGroupLabel>
|
||||||
|
<SidebarGroupContent>
|
||||||
|
<SidebarMenu>
|
||||||
|
{whatsappItems.map((item) => (
|
||||||
|
<SidebarMenuItem key={item.title}>
|
||||||
|
<SidebarMenuButton
|
||||||
|
asChild
|
||||||
|
tooltip={item.title}
|
||||||
|
isActive={location.pathname === item.url}
|
||||||
|
>
|
||||||
|
<Link to={item.url}>
|
||||||
|
<item.icon />
|
||||||
|
<span>{item.title}</span>
|
||||||
|
</Link>
|
||||||
|
</SidebarMenuButton>
|
||||||
|
</SidebarMenuItem>
|
||||||
|
))}
|
||||||
|
</SidebarMenu>
|
||||||
|
</SidebarGroupContent>
|
||||||
|
</SidebarGroup>
|
||||||
|
</SidebarContent>
|
||||||
|
|
||||||
|
<SidebarFooter>
|
||||||
|
<SidebarGroup>
|
||||||
|
<SidebarMenu>
|
||||||
|
{configItems.map((item) => (
|
||||||
|
<SidebarMenuItem key={item.title}>
|
||||||
|
<SidebarMenuButton
|
||||||
|
asChild
|
||||||
|
tooltip={item.title}
|
||||||
|
isActive={location.pathname === item.url}
|
||||||
|
>
|
||||||
|
<Link to={item.url}>
|
||||||
|
<item.icon />
|
||||||
|
<span>{item.title}</span>
|
||||||
|
</Link>
|
||||||
|
</SidebarMenuButton>
|
||||||
|
</SidebarMenuItem>
|
||||||
|
))}
|
||||||
|
</SidebarMenu>
|
||||||
|
</SidebarGroup>
|
||||||
|
</SidebarFooter>
|
||||||
|
</Sidebar>
|
||||||
|
|
||||||
|
<SidebarInset className="flex-1">
|
||||||
|
<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
|
||||||
|
<SidebarTrigger className="-ml-1" />
|
||||||
|
</header>
|
||||||
|
<main className="flex-1 overflow-y-auto">
|
||||||
|
<div className="container mx-auto px-4 py-6">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</SidebarInset>
|
||||||
|
</SidebarProvider>
|
||||||
|
|
||||||
|
{/* Help Icon */}
|
||||||
|
<HelpIcon />
|
||||||
|
|
||||||
|
{/* Tour de Onboarding */}
|
||||||
|
<OnboardingTour
|
||||||
|
isOpen={tourOpen}
|
||||||
|
currentStep={currentStep}
|
||||||
|
onNext={nextStep}
|
||||||
|
onSkip={skipTour}
|
||||||
|
onClose={closeTour}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,3 +1,6 @@
|
|||||||
|
|
||||||
|
"use client"
|
||||||
|
|
||||||
import * as React from "react"
|
import * as React from "react"
|
||||||
import { Slot } from "@radix-ui/react-slot"
|
import { Slot } from "@radix-ui/react-slot"
|
||||||
import { VariantProps, cva } from "class-variance-authority"
|
import { VariantProps, cva } from "class-variance-authority"
|
||||||
@ -17,7 +20,7 @@ import {
|
|||||||
TooltipTrigger,
|
TooltipTrigger,
|
||||||
} from "@/components/ui/tooltip"
|
} from "@/components/ui/tooltip"
|
||||||
|
|
||||||
const SIDEBAR_COOKIE_NAME = "sidebar:state"
|
const SIDEBAR_COOKIE_NAME = "sidebar_state"
|
||||||
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
|
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
|
||||||
const SIDEBAR_WIDTH = "16rem"
|
const SIDEBAR_WIDTH = "16rem"
|
||||||
const SIDEBAR_WIDTH_MOBILE = "18rem"
|
const SIDEBAR_WIDTH_MOBILE = "18rem"
|
||||||
@ -437,7 +440,7 @@ const SidebarGroupLabel = React.forwardRef<
|
|||||||
ref={ref}
|
ref={ref}
|
||||||
data-sidebar="group-label"
|
data-sidebar="group-label"
|
||||||
className={cn(
|
className={cn(
|
||||||
"duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
"duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||||
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
|
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
|
|||||||
175
src/index.css
175
src/index.css
@ -1,87 +1,83 @@
|
|||||||
|
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
:root {
|
:root {
|
||||||
--background: 210 40% 98%;
|
--background: 0 0% 100%;
|
||||||
--foreground: 222.2 84% 4.9%;
|
--foreground: 240 10% 3.9%;
|
||||||
|
|
||||||
--card: 0 0% 100%;
|
--card: 0 0% 100%;
|
||||||
--card-foreground: 222.2 84% 4.9%;
|
--card-foreground: 240 10% 3.9%;
|
||||||
|
|
||||||
--popover: 0 0% 100%;
|
--popover: 0 0% 100%;
|
||||||
--popover-foreground: 222.2 84% 4.9%;
|
--popover-foreground: 240 10% 3.9%;
|
||||||
|
--primary: 240 5.9% 10%;
|
||||||
--primary: 221.2 83% 53.3%;
|
--primary-foreground: 0 0% 98%;
|
||||||
--primary-foreground: 210 40% 98%;
|
--secondary: 240 4.8% 95.9%;
|
||||||
|
--secondary-foreground: 240 5.9% 10%;
|
||||||
--secondary: 210 40% 96.1%;
|
--muted: 240 4.8% 95.9%;
|
||||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
--muted-foreground: 240 3.8% 46.1%;
|
||||||
|
--accent: 240 4.8% 95.9%;
|
||||||
--muted: 210 40% 96.1%;
|
--accent-foreground: 240 5.9% 10%;
|
||||||
--muted-foreground: 215.4 16.3% 46.9%;
|
|
||||||
|
|
||||||
--accent: 210 40% 96.1%;
|
|
||||||
--accent-foreground: 222.2 47.4% 11.2%;
|
|
||||||
|
|
||||||
--destructive: 0 84.2% 60.2%;
|
--destructive: 0 84.2% 60.2%;
|
||||||
--destructive-foreground: 210 40% 98%;
|
--destructive-foreground: 0 0% 98%;
|
||||||
|
--border: 240 5.9% 90%;
|
||||||
--border: 214.3 31.8% 91.4%;
|
--input: 240 5.9% 90%;
|
||||||
--input: 214.3 31.8% 91.4%;
|
--ring: 240 10% 3.9%;
|
||||||
--ring: 221.2 83% 53.3%;
|
--chart-1: 12 76% 61%;
|
||||||
|
--chart-2: 173 58% 39%;
|
||||||
|
--chart-3: 197 37% 24%;
|
||||||
|
--chart-4: 43 74% 66%;
|
||||||
|
--chart-5: 27 87% 67%;
|
||||||
--radius: 0.5rem;
|
--radius: 0.5rem;
|
||||||
|
|
||||||
--sidebar-background: 210 40% 98%;
|
/* Sidebar variables */
|
||||||
--sidebar-foreground: 222.2 84% 4.9%;
|
--sidebar-background: 0 0% 98%;
|
||||||
--sidebar-primary: 221.2 83% 53.3%;
|
--sidebar-foreground: 240 5.3% 26.1%;
|
||||||
|
--sidebar-primary: 240 5.9% 10%;
|
||||||
--sidebar-primary-foreground: 0 0% 98%;
|
--sidebar-primary-foreground: 0 0% 98%;
|
||||||
--sidebar-accent: 210 40% 96.1%;
|
--sidebar-accent: 240 4.8% 95.9%;
|
||||||
--sidebar-accent-foreground: 222.2 47.4% 11.2%;
|
--sidebar-accent-foreground: 240 5.9% 10%;
|
||||||
--sidebar-border: 214.3 31.8% 91.4%;
|
--sidebar-border: 220 13% 91%;
|
||||||
--sidebar-ring: 221.2 83% 53.3%;
|
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
--background: 222.2 84% 4.9%;
|
--background: 240 10% 3.9%;
|
||||||
--foreground: 210 40% 98%;
|
--foreground: 0 0% 98%;
|
||||||
|
--card: 240 10% 3.9%;
|
||||||
--card: 222.2 84% 4.9%;
|
--card-foreground: 0 0% 98%;
|
||||||
--card-foreground: 210 40% 98%;
|
--popover: 240 10% 3.9%;
|
||||||
|
--popover-foreground: 0 0% 98%;
|
||||||
--popover: 222.2 84% 4.9%;
|
--primary: 0 0% 98%;
|
||||||
--popover-foreground: 210 40% 98%;
|
--primary-foreground: 240 5.9% 10%;
|
||||||
|
--secondary: 240 3.7% 15.9%;
|
||||||
--primary: 217.2 91.2% 59.8%;
|
--secondary-foreground: 0 0% 98%;
|
||||||
--primary-foreground: 222.2 47.4% 11.2%;
|
--muted: 240 3.7% 15.9%;
|
||||||
|
--muted-foreground: 240 5% 64.9%;
|
||||||
--secondary: 217.2 32.6% 17.5%;
|
--accent: 240 3.7% 15.9%;
|
||||||
--secondary-foreground: 210 40% 98%;
|
--accent-foreground: 0 0% 98%;
|
||||||
|
|
||||||
--muted: 217.2 32.6% 17.5%;
|
|
||||||
--muted-foreground: 215 20.2% 65.1%;
|
|
||||||
|
|
||||||
--accent: 217.2 32.6% 17.5%;
|
|
||||||
--accent-foreground: 210 40% 98%;
|
|
||||||
|
|
||||||
--destructive: 0 62.8% 30.6%;
|
--destructive: 0 62.8% 30.6%;
|
||||||
--destructive-foreground: 210 40% 98%;
|
--destructive-foreground: 0 0% 98%;
|
||||||
|
--border: 240 3.7% 15.9%;
|
||||||
--border: 217.2 32.6% 17.5%;
|
--input: 240 3.7% 15.9%;
|
||||||
--input: 217.2 32.6% 17.5%;
|
--ring: 240 4.9% 83.9%;
|
||||||
--ring: 224.3 76.3% 48%;
|
--chart-1: 220 70% 50%;
|
||||||
|
--chart-2: 160 60% 45%;
|
||||||
--sidebar-background: 222.2 84% 4.9%;
|
--chart-3: 30 80% 55%;
|
||||||
--sidebar-foreground: 210 40% 98%;
|
--chart-4: 280 65% 60%;
|
||||||
--sidebar-primary: 217.2 91.2% 59.8%;
|
--chart-5: 340 75% 55%;
|
||||||
--sidebar-primary-foreground: 222.2 47.4% 11.2%;
|
|
||||||
--sidebar-accent: 217.2 32.6% 17.5%;
|
/* Sidebar dark variables */
|
||||||
--sidebar-accent-foreground: 210 40% 98%;
|
--sidebar-background: 240 5.9% 10%;
|
||||||
--sidebar-border: 217.2 32.6% 17.5%;
|
--sidebar-foreground: 240 4.8% 95.9%;
|
||||||
--sidebar-ring: 224.3 76.3% 48%;
|
--sidebar-primary: 224.3 76.3% 48%;
|
||||||
|
--sidebar-primary-foreground: 0 0% 100%;
|
||||||
|
--sidebar-accent: 240 3.7% 15.9%;
|
||||||
|
--sidebar-accent-foreground: 240 4.8% 95.9%;
|
||||||
|
--sidebar-border: 240 3.7% 15.9%;
|
||||||
|
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -89,38 +85,23 @@
|
|||||||
* {
|
* {
|
||||||
@apply border-border;
|
@apply border-border;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@apply bg-background text-foreground;
|
@apply bg-background text-foreground;
|
||||||
font-feature-settings: "rlig" 1, "calt" 1;
|
font-family: "Inter", sans-serif;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer utilities {
|
/* Definir cores no Tailwind */
|
||||||
.scrollbar-hide::-webkit-scrollbar {
|
.sidebar {
|
||||||
display: none;
|
background-color: hsl(var(--sidebar-background));
|
||||||
}
|
color: hsl(var(--sidebar-foreground));
|
||||||
|
}
|
||||||
.scrollbar-hide {
|
|
||||||
-ms-overflow-style: none;
|
.sidebar-accent {
|
||||||
scrollbar-width: none;
|
background-color: hsl(var(--sidebar-accent));
|
||||||
}
|
color: hsl(var(--sidebar-accent-foreground));
|
||||||
|
}
|
||||||
.dashboard-card {
|
|
||||||
@apply bg-card rounded-lg border p-4 md:p-5 shadow-sm transition-all hover:shadow-md;
|
.sidebar-border {
|
||||||
}
|
border-color: hsl(var(--sidebar-border));
|
||||||
|
|
||||||
.data-card {
|
|
||||||
@apply bg-card rounded-lg border p-3 md:p-4 shadow-sm transition-all;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive utilities */
|
|
||||||
.responsive-grid {
|
|
||||||
@apply grid gap-2 sm:gap-3 md:gap-4;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.responsive-container {
|
|
||||||
@apply px-2 sm:px-4 md:px-6;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,123 +1,103 @@
|
|||||||
|
|
||||||
import type { Config } from "tailwindcss";
|
import type { Config } from "tailwindcss";
|
||||||
|
|
||||||
export default {
|
const config: Config = {
|
||||||
darkMode: ["class"],
|
darkMode: ["class"],
|
||||||
content: [
|
content: [
|
||||||
"./pages/**/*.{ts,tsx}",
|
"./pages/**/*.{ts,tsx}",
|
||||||
"./components/**/*.{ts,tsx}",
|
"./components/**/*.{ts,tsx}",
|
||||||
"./app/**/*.{ts,tsx}",
|
"./app/**/*.{ts,tsx}",
|
||||||
"./src/**/*.{ts,tsx}",
|
"./src/**/*.{ts,tsx}",
|
||||||
],
|
],
|
||||||
prefix: "",
|
prefix: "",
|
||||||
theme: {
|
theme: {
|
||||||
container: {
|
container: {
|
||||||
center: true,
|
center: true,
|
||||||
padding: '2rem',
|
padding: "2rem",
|
||||||
screens: {
|
screens: {
|
||||||
'2xl': '1400px'
|
"2xl": "1400px",
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
border: 'hsl(var(--border))',
|
border: "hsl(var(--border))",
|
||||||
input: 'hsl(var(--input))',
|
input: "hsl(var(--input))",
|
||||||
ring: 'hsl(var(--ring))',
|
ring: "hsl(var(--ring))",
|
||||||
background: 'hsl(var(--background))',
|
background: "hsl(var(--background))",
|
||||||
foreground: 'hsl(var(--foreground))',
|
foreground: "hsl(var(--foreground))",
|
||||||
primary: {
|
primary: {
|
||||||
DEFAULT: 'hsl(var(--primary))',
|
DEFAULT: "hsl(var(--primary))",
|
||||||
foreground: 'hsl(var(--primary-foreground))'
|
foreground: "hsl(var(--primary-foreground))",
|
||||||
},
|
},
|
||||||
secondary: {
|
secondary: {
|
||||||
DEFAULT: 'hsl(var(--secondary))',
|
DEFAULT: "hsl(var(--secondary))",
|
||||||
foreground: 'hsl(var(--secondary-foreground))'
|
foreground: "hsl(var(--secondary-foreground))",
|
||||||
},
|
},
|
||||||
destructive: {
|
destructive: {
|
||||||
DEFAULT: 'hsl(var(--destructive))',
|
DEFAULT: "hsl(var(--destructive))",
|
||||||
foreground: 'hsl(var(--destructive-foreground))'
|
foreground: "hsl(var(--destructive-foreground))",
|
||||||
},
|
},
|
||||||
muted: {
|
muted: {
|
||||||
DEFAULT: 'hsl(var(--muted))',
|
DEFAULT: "hsl(var(--muted))",
|
||||||
foreground: 'hsl(var(--muted-foreground))'
|
foreground: "hsl(var(--muted-foreground))",
|
||||||
},
|
},
|
||||||
accent: {
|
accent: {
|
||||||
DEFAULT: 'hsl(var(--accent))',
|
DEFAULT: "hsl(var(--accent))",
|
||||||
foreground: 'hsl(var(--accent-foreground))'
|
foreground: "hsl(var(--accent-foreground))",
|
||||||
},
|
},
|
||||||
popover: {
|
popover: {
|
||||||
DEFAULT: 'hsl(var(--popover))',
|
DEFAULT: "hsl(var(--popover))",
|
||||||
foreground: 'hsl(var(--popover-foreground))'
|
foreground: "hsl(var(--popover-foreground))",
|
||||||
},
|
},
|
||||||
card: {
|
card: {
|
||||||
DEFAULT: 'hsl(var(--card))',
|
DEFAULT: "hsl(var(--card))",
|
||||||
foreground: 'hsl(var(--card-foreground))'
|
foreground: "hsl(var(--card-foreground))",
|
||||||
},
|
},
|
||||||
sidebar: {
|
sidebar: {
|
||||||
DEFAULT: 'hsl(var(--sidebar-background))',
|
DEFAULT: "hsl(var(--sidebar-background))",
|
||||||
foreground: 'hsl(var(--sidebar-foreground))',
|
foreground: "hsl(var(--sidebar-foreground))",
|
||||||
primary: 'hsl(var(--sidebar-primary))',
|
primary: "hsl(var(--sidebar-primary))",
|
||||||
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
|
"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
|
||||||
accent: 'hsl(var(--sidebar-accent))',
|
accent: "hsl(var(--sidebar-accent))",
|
||||||
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
|
"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
|
||||||
border: 'hsl(var(--sidebar-border))',
|
border: "hsl(var(--sidebar-border))",
|
||||||
ring: 'hsl(var(--sidebar-ring))'
|
ring: "hsl(var(--sidebar-ring))",
|
||||||
},
|
},
|
||||||
// Financial dashboard specific colors
|
chart: {
|
||||||
finance: {
|
"1": "hsl(var(--chart-1))",
|
||||||
'blue': '#1D4ED8',
|
"2": "hsl(var(--chart-2))",
|
||||||
'light-blue': '#60A5FA',
|
"3": "hsl(var(--chart-3))",
|
||||||
'green': '#10B981',
|
"4": "hsl(var(--chart-4))",
|
||||||
'light-green': '#34D399',
|
"5": "hsl(var(--chart-5))",
|
||||||
'red': '#EF4444',
|
},
|
||||||
'yellow': '#F59E0B',
|
},
|
||||||
'purple': '#8B5CF6'
|
borderRadius: {
|
||||||
}
|
lg: "var(--radius)",
|
||||||
},
|
md: "calc(var(--radius) - 2px)",
|
||||||
borderRadius: {
|
sm: "calc(var(--radius) - 4px)",
|
||||||
lg: 'var(--radius)',
|
},
|
||||||
md: 'calc(var(--radius) - 2px)',
|
keyframes: {
|
||||||
sm: 'calc(var(--radius) - 4px)'
|
"accordion-down": {
|
||||||
},
|
from: { height: "0" },
|
||||||
keyframes: {
|
to: { height: "var(--radix-accordion-content-height)" },
|
||||||
'accordion-down': {
|
},
|
||||||
from: {
|
"accordion-up": {
|
||||||
height: '0'
|
from: { height: "var(--radix-accordion-content-height)" },
|
||||||
},
|
to: { height: "0" },
|
||||||
to: {
|
},
|
||||||
height: 'var(--radix-accordion-content-height)'
|
"caret-blink": {
|
||||||
}
|
"0%,70%,100%": { opacity: "1" },
|
||||||
},
|
"20%,50%": { opacity: "0" },
|
||||||
'accordion-up': {
|
},
|
||||||
from: {
|
},
|
||||||
height: 'var(--radix-accordion-content-height)'
|
animation: {
|
||||||
},
|
"accordion-down": "accordion-down 0.2s ease-out",
|
||||||
to: {
|
"accordion-up": "accordion-up 0.2s ease-out",
|
||||||
height: '0'
|
"caret-blink": "caret-blink 1.25s ease-out infinite",
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
'fade-in': {
|
},
|
||||||
'0%': {
|
plugins: [require("tailwindcss-animate")],
|
||||||
opacity: '0',
|
|
||||||
transform: 'translateY(10px)'
|
|
||||||
},
|
|
||||||
'100%': {
|
|
||||||
opacity: '1',
|
|
||||||
transform: 'translateY(0)'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'pulse-gentle': {
|
|
||||||
'0%, 100%': { opacity: '1' },
|
|
||||||
'50%': { opacity: '0.8' }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
animation: {
|
|
||||||
'accordion-down': 'accordion-down 0.2s ease-out',
|
|
||||||
'accordion-up': 'accordion-up 0.2s ease-out',
|
|
||||||
'fade-in': 'fade-in 0.5s ease-out',
|
|
||||||
'pulse-gentle': 'pulse-gentle 2s infinite'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
plugins: [require("tailwindcss-animate")],
|
|
||||||
} satisfies Config;
|
} satisfies Config;
|
||||||
|
|
||||||
|
export default config;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user