ADD new frontend

fdev-ffrontend/src/components/layout/SettingsLayout.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import { SecondaryNavigation } from '../navigation/SecondaryNavigation';
+import { Breadcrumbs } from '../navigation/Breadcrumbs';
+import { usePermissions } from '../../hooks/usePermissions';
+
+const SettingsLayout: React.FC = () => {
+  const { hasRole } = usePermissions();
+
+  const getNavigationItems = () => {
+    const baseItems = [
+      {
+        id: 'general',
+        label: 'General',
+        href: '/app/settings/general',
+        icon: 'Settings'
+      },
+      {
+        id: 'account',
+        label: 'Cuenta',
+        href: '/app/settings/account',
+        icon: 'User'
+      }
+    ];
+
+    // Add admin-only items
+    if (hasRole('admin')) {
+      baseItems.unshift(
+        {
+          id: 'bakeries',
+          label: 'Panaderías',
+          href: '/app/settings/bakeries',
+          icon: 'Building'
+        },
+        {
+          id: 'users',
+          label: 'Usuarios',
+          href: '/app/settings/users',
+          icon: 'Users'
+        }
+      );
+    }
+
+    return baseItems;
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="bg-white border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <Breadcrumbs />
+          <SecondaryNavigation items={getNavigationItems()} />
+        </div>
+      </div>
+      
+      <div className="flex-1 bg-gray-50">
+        <div className="max-w-7xl mx-auto">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SettingsLayout;