ALwrity Version 0.5.0 (Fastapi + React )

2025-08-06 12:48:02 +05:30
parent f28a919caa
commit 32f97fa6b3
476 changed files with 115544 additions and 28747 deletions
--- a/frontend/src/components/shared/styled.ts
+++ b/frontend/src/components/shared/styled.ts
@@ -0,0 +1,138 @@
+import { Box, Card, Chip } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+// Shared styled components for dashboard components
+export const DashboardContainer = styled(Box)(({ theme }) => ({
+  minHeight: '100vh',
+  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)',
+  padding: theme.spacing(4),
+  position: 'relative',
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: 'url("data:image/svg+xml,%3Csvg width="80" height="80" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.03"%3E%3Ccircle cx="40" cy="40" r="3"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")',
+    pointerEvents: 'none',
+  },
+  '&::after': {
+    content: '""',
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    width: '600px',
+    height: '600px',
+    background: 'radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%)',
+    transform: 'translate(-50%, -50%)',
+    pointerEvents: 'none',
+    zIndex: 0,
+  },
+}));
+
+export const GlassCard = styled(Card)(({ theme }) => ({
+  background: 'rgba(255, 255, 255, 0.08)',
+  backdropFilter: 'blur(24px)',
+  border: '1px solid rgba(255, 255, 255, 0.12)',
+  borderRadius: theme.spacing(3),
+  boxShadow: '0 12px 40px rgba(0, 0, 0, 0.12)',
+  transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
+  position: 'relative',
+  overflow: 'hidden',
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    left: '-100%',
+    width: '100%',
+    height: '100%',
+    background: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent)',
+    transition: 'left 0.6s ease-in-out',
+  },
+  '&:hover': {
+    transform: 'translateY(-12px) scale(1.02)',
+    boxShadow: '0 24px 60px rgba(0, 0, 0, 0.18)',
+    border: '1px solid rgba(255, 255, 255, 0.2)',
+    '&::before': {
+      left: '100%',
+    },
+  },
+}));
+
+export const ShimmerHeader = styled(Box)(({ theme }) => ({
+  position: 'relative',
+  overflow: 'hidden',
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    left: '-100%',
+    width: '100%',
+    height: '3px',
+    background: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent)',
+    animation: 'shimmer 3s infinite',
+  },
+  '@keyframes shimmer': {
+    '0%': { left: '-100%' },
+    '100%': { left: '100%' },
+  },
+}));
+
+export const SearchContainer = styled(Box)(({ theme }) => ({
+  background: 'rgba(255, 255, 255, 0.1)',
+  backdropFilter: 'blur(20px)',
+  border: '1px solid rgba(255, 255, 255, 0.2)',
+  borderRadius: theme.spacing(3),
+  padding: theme.spacing(2),
+  marginBottom: theme.spacing(4),
+  transition: 'all 0.3s ease',
+  '&:hover': {
+    background: 'rgba(255, 255, 255, 0.15)',
+    border: '1px solid rgba(255, 255, 255, 0.3)',
+  },
+}));
+
+export const CategoryChip = styled(Chip, {
+  shouldForwardProp: (prop) => prop !== 'active',
+})<{ active?: boolean }>(({ theme, active }) => ({
+  background: active ? 'rgba(255, 255, 255, 0.25)' : 'rgba(255, 255, 255, 0.1)',
+  color: 'white',
+  fontWeight: 600,
+  fontSize: '0.9rem',
+  padding: theme.spacing(1, 2),
+  border: `1px solid ${active ? 'rgba(255, 255, 255, 0.4)' : 'rgba(255, 255, 255, 0.2)'}`,
+  transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+  '&:hover': {
+    background: 'rgba(255, 255, 255, 0.25)',
+    transform: 'translateY(-2px)',
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+  },
+  '& .MuiChip-label': {
+    padding: theme.spacing(0.5, 1),
+  },
+}));
+
+export const EnhancedGlassCard = styled(GlassCard)(({ theme }) => ({
+  background: 'rgba(255, 255, 255, 0.12)',
+  border: '2px solid rgba(255, 255, 255, 0.2)',
+  '&:hover': {
+    border: '2px solid rgba(255, 255, 255, 0.3)',
+  },
+}));
+
+export const AIInsightsPanel = styled(GlassCard)(({ theme }) => ({
+  background: 'rgba(255, 255, 255, 0.1)',
+  border: '1px solid rgba(255, 255, 255, 0.15)',
+  position: 'relative',
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: '3px',
+    background: 'linear-gradient(90deg, #667eea, #764ba2, #f093fb)',
+    borderRadius: '3px 3px 0 0',
+  },
+}));