+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+
+
+ {[...Array(5)].map((_, i) => (
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+ );
+ }
+
+ const articles = data?.articles || [];
+ const pagination = data?.pagination;
+ const settings = data?.settings;
+
+ return (
+
+
+ Failed to load articles
+
+
+ );
+};
+
+export default Articles;
\ No newline at end of file
diff --git a/resources/js/pages/Dashboard.tsx b/resources/js/pages/Dashboard.tsx
new file mode 100644
index 0000000..24a130e
--- /dev/null
+++ b/resources/js/pages/Dashboard.tsx
@@ -0,0 +1,191 @@
+import React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { FileText, Rss, Users, Route, TrendingUp, Clock, CheckCircle } from 'lucide-react';
+import { apiClient } from '../lib/api';
+
+const Dashboard: React.FC = () => {
+ const { data: stats, isLoading, error } = useQuery({
+ queryKey: ['dashboard-stats'],
+ queryFn: () => apiClient.getDashboardStats(),
+ });
+
+ if (isLoading) {
+ return (
+
+
+
+ Articles
++ Manage and review articles from your feeds +
+ {settings?.publishing_approvals_enabled && ( +
+
+ )}
+
+ {articles.map((article: Article) => (
+
+
+
+ ))}
+
+ {articles.length === 0 && (
+
+
+
+ {article.approval_status === 'pending' && settings?.publishing_approvals_enabled && (
+
+
+ + {article.title || 'Untitled Article'} +
++ {article.description || 'No description available'} +
+
+ Feed: {article.feed?.name || 'Unknown'}
+ •
+ {new Date(article.created_at).toLocaleDateString()}
+ {article.is_valid !== null && (
+ <>
+ •
+
+ {article.is_valid ? 'Valid' : 'Invalid'}
+
+
+ )}
+ {article.is_duplicate && (
+ <>
+ •
+ Duplicate
+
+ )}
+
+
+ {getStatusBadge(article.approval_status)}
+
+
+
+
+
+
+ )}
+
+
+ )}
+
+ {/* Pagination */}
+ {pagination && pagination.last_page > 1 && (
+ No articles
++ No articles have been fetched yet. +
+
+
+ )}
+
+
+
+
+
+
+
+
+ + Showing{' '} + {pagination.from} to{' '} + {pagination.to} of{' '} + {pagination.total} results +
+
+
+
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+
+
+ {[...Array(4)].map((_, i) => (
+
+
+
+
+
+ ))}
+
+
+ );
+ }
+
+ const articleStats = stats?.article_stats;
+ const systemStats = stats?.system_stats;
+
+ return (
+
+
+ Failed to load dashboard data
+
+
+ );
+};
+
+export default Dashboard;
\ No newline at end of file
diff --git a/resources/js/pages/Feeds.tsx b/resources/js/pages/Feeds.tsx
new file mode 100644
index 0000000..e366ae5
--- /dev/null
+++ b/resources/js/pages/Feeds.tsx
@@ -0,0 +1,145 @@
+import React from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Rss, Globe, ToggleLeft, ToggleRight, ExternalLink } from 'lucide-react';
+import { apiClient, Feed } from '../lib/api';
+
+const Feeds: React.FC = () => {
+ const queryClient = useQueryClient();
+
+ const { data: feeds, isLoading, error } = useQuery({
+ queryKey: ['feeds'],
+ queryFn: () => apiClient.getFeeds(),
+ });
+
+ const toggleMutation = useMutation({
+ mutationFn: (feedId: number) => apiClient.toggleFeed(feedId),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['feeds'] });
+ },
+ });
+
+ const handleToggle = (feedId: number) => {
+ toggleMutation.mutate(feedId);
+ };
+
+ const getTypeIcon = (type: string) => {
+ switch (type) {
+ case 'rss':
+ return
+
+
+ {/* Article Statistics */}
+ Dashboard
++ Overview of your feed management system +
+
+
+
+ {/* System Statistics */}
+ Article Statistics
+
+
+
+
+
+
+
+
+
+
+
+ Articles Today
++ {articleStats?.total_today || 0} +
+
+
+
+
+
+
+
+
+
+ Articles This Week
++ {articleStats?.total_week || 0} +
+
+
+
+
+
+
+
+
+
+ Approved Today
++ {articleStats?.approved_today || 0} +
+
+
+
+
+
+
+
+
+ Approval Rate
++ {articleStats?.approval_percentage_today?.toFixed(1) || 0}% +
+
+
+ System Overview
+
+
+
+
+
+
+
+
+
+
+
+ Active Feeds
++ {systemStats?.active_feeds || 0} + + /{systemStats?.total_feeds || 0} + +
+
+
+
+
+
+
+
+
+
+ Platform Accounts
++ {systemStats?.active_platform_accounts || 0} + + /{systemStats?.total_platform_accounts || 0} + +
+
+
+
+
+
+
+
+
+
+ Platform Channels
++ {systemStats?.active_platform_channels || 0} + + /{systemStats?.total_platform_channels || 0} + +
+
+
+
+
+
+
+
+
+ Active Routes
++ {systemStats?.active_routes || 0} + + /{systemStats?.total_routes || 0} + +
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+
+
+ {[...Array(6)].map((_, i) => (
+
+
+
+
+
+
+ ))}
+
+
+ );
+ }
+
+ return (
+
+
+ Failed to load feeds
+
+
+ );
+};
+
+export default Feeds;
\ No newline at end of file
diff --git a/resources/js/pages/Login.tsx b/resources/js/pages/Login.tsx
new file mode 100644
index 0000000..5e24d15
--- /dev/null
+++ b/resources/js/pages/Login.tsx
@@ -0,0 +1,129 @@
+import React, { useState } from 'react';
+import { Eye, EyeOff, LogIn } from 'lucide-react';
+import { apiClient } from '../lib/api';
+
+const Login: React.FC = () => {
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [showPassword, setShowPassword] = useState(false);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState('');
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setLoading(true);
+ setError('');
+
+ try {
+ const authData = await apiClient.login({ email, password });
+ apiClient.setAuth(authData.token, authData.user);
+ window.location.reload();
+ } catch (err: any) {
+ setError(err.response?.data?.message || 'Login failed. Please try again.');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+
+
+ Feeds
++ Manage your RSS feeds and website sources +
+
+ {feeds?.map((feed: Feed) => (
+
+
+
+ ))}
+
+ {feeds?.length === 0 && (
+
+
+
+
+ {getTypeIcon(feed.type)}
+
+
+ + {feed.name} +
++ {feed.description || 'No description provided'} +
+ +
+
+
+
+
+ {feed.is_active ? 'Active' : 'Inactive'}
+
+
+ {feed.type.toUpperCase()}
+
+
+
+
+ Added {new Date(feed.created_at).toLocaleDateString()}
+
+
+
+ )}
+ No feeds
++ Get started by adding your first feed. +
+
+
+ );
+};
+
+export default Login;
\ No newline at end of file
diff --git a/resources/js/pages/Settings.tsx b/resources/js/pages/Settings.tsx
new file mode 100644
index 0000000..e82df99
--- /dev/null
+++ b/resources/js/pages/Settings.tsx
@@ -0,0 +1,148 @@
+import React from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Settings as SettingsIcon, Save, ToggleLeft, ToggleRight } from 'lucide-react';
+import { apiClient } from '../lib/api';
+
+const Settings: React.FC = () => {
+ const queryClient = useQueryClient();
+
+ const { data: settings, isLoading, error } = useQuery({
+ queryKey: ['settings'],
+ queryFn: () => apiClient.getSettings(),
+ });
+
+ const updateMutation = useMutation({
+ mutationFn: (data: any) => apiClient.updateSettings(data),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['settings'] });
+ },
+ });
+
+ const handleToggle = (key: string, value: boolean) => {
+ updateMutation.mutate({ [key]: value });
+ };
+
+ if (isLoading) {
+ return (
+
+
+
+
+ 
+
+
+ + Sign in to FFR +
++ Feed Feed Reader - Article Management System +
+
+
+
+
+
+
+
+
+
+ Demo credentials: test@example.com / password123
+
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+ Failed to load settings
+
+
+ );
+};
+
+export default Settings;
\ No newline at end of file
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
new file mode 100644
index 0000000..eeb71de
--- /dev/null
+++ b/resources/views/app.blade.php
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+ Settings
++ Configure your system preferences +
+
+ {/* Article Processing Settings */}
+
+
+
+
+ {/* Status indicator */}
+ {updateMutation.isPending && (
+
+
+
+
+
+
+ + Control how articles are processed and handled +
+
+
+
+
+
+
+
+
+ + Article Processing Enabled +
++ Enable automatic fetching and processing of articles from feeds +
+
+
+
+
+
+ + Publishing Approvals Required +
++ Require manual approval before articles are published to platforms +
+
+
+ )}
+
+ {updateMutation.isError && (
+
+
+
+ Updating settings...
+
+
+ )}
+
+ {updateMutation.isSuccess && (
+ Failed to update settings. Please try again.
+
+
+ )}
+ Settings updated successfully!
+