Read to earn

import React from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Textarea } from "@/components/ui/textarea"; export default function AdminDashboard() { return (

Admin Dashboard

User Management Point Oversight Reports Settings

Manage Users

Monitor Points

Total points in system: 27,000,000

Active points in use: 12,540,000

Content Reports

</CardContent>
          </Card>
        </TabsContent>

<TabsContent value="settings">
          <Card>
            <CardContent className="space-y-4 p-6">
              <h3 className="text-lg font-semibold">Platform Settings</h3>
              <Label>Exchange rate (MAD per point):</Label>
              <Input defaultValue="0.0527" type="number" />
              <Button className="mt-2">Update</Button>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}

✅ تم الآن إضافة لوحة تحكم إدارية للمشرفين، وتشمل:

إدارة المستخدمين (بحث، إشراف).

تتبع حالة النقاط في النظام.

عرض تقارير المحتوى.

ضبط إعدادات المنصة مثل سعر النقطة.

📦 الآن أصبح لديك تصميم متكامل لمنصة "Tawasae" يشمل:

1. تسجيل/دخول.

2. عرض وتداول النقاط.

3. دعم اللغات (AR | EN | FR).

4. نسخة HTML قابلة للنشر.

5. لوحة تحكم إدارية.

هل ترغب الآن بإخراج الملفات النهائية (HTML + كود React جاهز للدمج)؟ أم إضافة ميزات جديدة؟

<div style='clear: both;'></div>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
</span>
<span class='post-timestamp'>
في
<meta content='https://earn4read.blogspot.com/2025/07/import-react-from-react-import-card_30.html' itemprop='url'/>
<a class='timestamp-link' href='https://earn4read.blogspot.com/2025/07/import-react-from-react-import-card_30.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2025-07-30T01:10:00-07:00'>يوليو 30, 2025</abbr></a>
</span>
<span class='post-comment-link'>
</span>
<span class='post-icons'>
<span class='item-control blog-admin pid-2074873709'>
<a href='https://www.blogger.com/post-edit.g?blogID=3005819615747763590&postID=846046501131804500&from=pencil' title='تعديل الرسالة'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</span>
<div class='post-share-buttons goog-inline-block'>
<a class='goog-inline-block share-button sb-email' href='https://www.blogger.com/share-post.g?blogID=3005819615747763590&postID=846046501131804500&target=email' target='_blank' title='إرسال بالبريد الإلكتروني'><span class='share-button-link-text'>إرسال بالبريد الإلكتروني</span></a><a class='goog-inline-block share-button sb-blog' href='https://www.blogger.com/share-post.g?blogID=3005819615747763590&postID=846046501131804500&target=blog' onclick='window.open(this.href, "_blank", "height=270,width=475"); return false;' target='_blank' title='كتابة مدونة حول هذه المشاركة'><span class='share-button-link-text'>كتابة مدونة حول هذه المشاركة</span></a><a class='goog-inline-block share-button sb-twitter' href='https://www.blogger.com/share-post.g?blogID=3005819615747763590&postID=846046501131804500&target=twitter' target='_blank' title='‏المشاركة على X'><span class='share-button-link-text'>‏المشاركة على X</span></a><a class='goog-inline-block share-button sb-facebook' href='https://www.blogger.com/share-post.g?blogID=3005819615747763590&postID=846046501131804500&target=facebook' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='‏المشاركة في Facebook'><span class='share-button-link-text'>‏المشاركة في Facebook</span></a><a class='goog-inline-block share-button sb-pinterest' href='https://www.blogger.com/share-post.g?blogID=3005819615747763590&postID=846046501131804500&target=pinterest' target='_blank' title='‏المشاركة على Pinterest'><span class='share-button-link-text'>‏المشاركة على Pinterest</span></a>
</div>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
</span>
</div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
</span>
</div>
</div>
</div>
<div class='comments' id='comments'>
<a name='comments'></a>
<h4>ليست هناك تعليقات:</h4>
<div id='Blog1_comments-block-wrapper'>
<dl class='avatar-comment-indent' id='comments-block'>
</dl>
</div>
<p class='comment-footer'>
<div class='comment-form'>
<a name='comment-form'></a>
<h4 id='comment-post-message'>إرسال تعليق</h4>
<p>
</p>
<a href='https://www.blogger.com/comment/frame/3005819615747763590?po=846046501131804500&hl=ar&saa=85391&origin=https://earn4read.blogspot.com' id='comment-editor-src'></a>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410px' id='comment-editor' name='comment-editor' src='' width='100%'></iframe>
<script src='https://www.blogger.com/static/v1/jsbin/2830521187-comment_from_post_iframe.js' type='text/javascript'></script>
<script type='text/javascript'>
      BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html');
    </script>
</div>
</p>
</div>
</div>
<div class='inline-ad'>

</div>

</div></div>
      
</div>
<div class='blog-pager' id='blog-pager'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' href='https://earn4read.blogspot.com/2025/07/import-card-cardcontent-from.html' id='Blog1_blog-pager-newer-link' title='رسالة أحدث'>رسالة أحدث</a>
</span>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' href='https://earn4read.blogspot.com/2025/07/import-react-from-react-import-card.html' id='Blog1_blog-pager-older-link' title='رسالة أقدم'>رسالة أقدم</a>
</span>
<a class='home-link' href='https://earn4read.blogspot.com/'>الصفحة الرئيسية</a>
</div>
<div class='clear'></div>
<div class='post-feeds'>
<div class='feed-links'>
الاشتراك في:
<a class='feed-link' href='https://earn4read.blogspot.com/feeds/846046501131804500/comments/default' target='_blank' type='application/atom+xml'>تعليقات الرسالة (Atom)</a>
</div>
</div>
</div><div class='widget FeaturedPost' data-version='1' id='FeaturedPost1'>
<div class='post-summary'>
<p>
import React from "react";  export default function HomePage() { return (  {/* Header */}  Tawasae | توسّع   العربية  Français  En...
</p>
</div>
<style type='text/css'>
    .image {
      width: 100%;
    }
  </style>
<div class='clear'></div>
</div><div class='widget PopularPosts' data-version='1' id='PopularPosts1'>
<div class='widget-content popular-posts'>
<ul>
<li>
<div class='item-content'>
<div class='item-title'><a href='https://earn4read.blogspot.com/2025/07/full-professional-platform-design-for.html'>(بلا عنوان)</a></div>
<div class='item-snippet'>// Full Professional Platform Design for "Tawasae" // Language: English  import React from 'react'; import { Card, CardCon...</div>
</div>
<div style='clear: both;'></div>
</li>
<li>
<div class='item-content'>
<div class='item-title'><a href='https://earn4read.blogspot.com/2025/08/import-react-from-react-export-default.html'>(بلا عنوان)</a></div>
<div class='item-snippet'>import React from "react";  export default function HomePage() { return (  {/* Header */}  Tawasae | توسّع   العربية  Français  En...</div>
</div>
<div style='clear: both;'></div>
</li>
<li>
<div class='item-content'>
<div class='item-title'><a href='https://earn4read.blogspot.com/2025/07/import-react-from-react-import-card_30.html'>(بلا عنوان)</a></div>
<div class='item-snippet'>import React from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/comp...</div>
</div>
<div style='clear: both;'></div>
</li>
</ul>
<div class='clear'></div>
</div>
</div></div>
</div>
</div>
<div class='column-left-outer'>
<div class='column-left-inner'>
<aside>
</aside>
</div>
</div>
<div class='column-right-outer'>
<div class='column-right-inner'>
<aside>
</aside>
</div>
</div>
</div>
<div style='clear: both'></div>

</div>

</div>
</div>
<div class='main-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
<footer>
<div class='footer-outer'>
<div class='footer-cap-top cap-top'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
<div class='fauxborder-left footer-fauxborder-left'>
<div class='fauxborder-right footer-fauxborder-right'></div>
<div class='region-inner footer-inner'>
<div class='foot section' id='footer-1'><div class='widget HTML' data-version='1' id='HTML1'>
<div class='widget-content'>
// Full Professional Platform Design for "Tawasae" // Language: English

import React from 'react'; import { Card, CardContent } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { BarChart2, Star, Users, Settings, Coins } from 'lucide-react'; import { motion } from 'framer-motion';

export default function TawasaePlatform() { return ( <div classname="min-h-screen bg-gradient-to-br from-white to-gray-100 p-6"> {/* Header */} <header classname="flex justify-between items-center mb-10"> <h1 classname="text-4xl font-bold text-red-700">Tawasae</h1> <nav classname="space-x-4"> <button variant="outline">Home</button> <button variant="outline">Features</button> <button variant="outline">Rewards</button> <button variant="outline">Dashboard</button> <button>Login</button> </nav> </header>

{/* Hero Section */}
  <motion.section
    initial={{ opacity: 0, y: -40 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ duration: 0.7 }}
    classname="text-center mb-16"
  >
    <h2 classname="text-5xl font-extrabold mb-4">Empowering Your Digital Engagement</h2>
    <p classname="text-lg text-gray-600 max-w-2xl mx-auto">
      Tawasae is Morocco's first interactive reward-based platform enabling users to earn points through content engagement, sharing, and meaningful interaction.
    </p>
    <div classname="mt-6">
      <button size="lg">Get Started</button>
    </div>

{/* Features Section */}
  <section classname="grid md:grid-cols-3 gap-6 mb-16">
    <card>
      <cardcontent classname="p-6 text-center">
        <users classname="mx-auto mb-4 text-red-700" size={40} />
        <h3 classname="font-bold text-xl mb-2">Community Interaction</h3>
        <p>Earn points by reacting, commenting, and contributing to a vibrant digital community.</p>
      </users></cardcontent>
    </card>
    <card>
      <cardcontent classname="p-6 text-center">
        <coins classname="mx-auto mb-4 text-red-700" size={40} />
        <h3 classname="font-bold text-xl mb-2">Reward System</h3>
        <p>Convert your digital activity into points redeemable for valuable rewards or services.</p>
      </coins></cardcontent>
    </card>
    <card>
      <cardcontent classname="p-6 text-center">
        <barchart2 classname="mx-auto mb-4 text-red-700" size={40} />
        <h3 classname="font-bold text-xl mb-2">Real-Time Analytics</h3>
        <p>Track your engagement, points, and performance metrics in real-time.</p>
      </barchart2></cardcontent>
    </card>
  </section>

{/* Dashboard Preview */}
  <section classname="mb-16">
    <h3 classname="text-2xl font-bold mb-4">User Dashboard Preview</h3>
    <tabs defaultvalue="overview" classname="w-full">
      <tabslist classname="flex space-x-2">
        <tabstrigger value="overview">Overview</tabstrigger>
        <tabstrigger value="earnings">Earnings</tabstrigger>
        <tabstrigger value="settings">Settings</tabstrigger>
      </tabslist>
      <tabscontent value="overview" classname="p-4 bg-white rounded-xl shadow">
        <p>Welcome to your dashboard. Here, you can monitor your activity and recent interactions.</p>
      </tabscontent>
      <tabscontent value="earnings" classname="p-4 bg-white rounded-xl shadow">
        <p>Total Points Earned: <strong>3,200</strong><br />Total Value: <strong>168 MAD</strong></p>
      </tabscontent>
      <tabscontent value="settings" classname="p-4 bg-white rounded-xl shadow">
        <input placeholder="Change display name" classname="mb-2" />
        <button>Save</button>
      </tabscontent>
    </tabs>
  </section>

{/* Call to Action */}
  <motion.section
    initial={{ opacity: 0 }}
    whileinview={{ opacity: 1 }}
    viewport={{ once: true }}
    transition={{ duration: 1 }}
    classname="text-center bg-red-700 text-white p-10 rounded-xl"
  >
    <h3 classname="text-3xl font-bold mb-2">Start Expanding with Tawasae Today</h3>
    <p classname="mb-4">Your engagement is valuable. Make it count.</p>
    <button variant="secondary">Join Now</button>
  
</motion.section
></motion.section
></div>

); }
</div>
<div class='clear'></div>
</div><div class='widget Followers' data-version='1' id='Followers1'>
<h2 class='title'>المتابعون</h2>
<div class='widget-content'>
<div id='Followers1-wrapper'>
<div style='margin-right:2px;'>
<div><script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<div id="followers-iframe-container"></div>
<script type="text/javascript">
    window.followersIframe = null;
    function followersIframeOpen(url) {
      gapi.load("gapi.iframes", function() {
        if (gapi.iframes && gapi.iframes.getContext) {
          window.followersIframe = gapi.iframes.getContext().openChild({
            url: url,
            where: document.getElementById("followers-iframe-container"),
            messageHandlersFilter: gapi.iframes.CROSS_ORIGIN_IFRAMES_FILTER,
            messageHandlers: {
              '_ready': function(obj) {
                window.followersIframe.getIframeEl().height = obj.height;
              },
              'reset': function() {
                window.followersIframe.close();
                followersIframeOpen("https://www.blogger.com/followers/frame/3005819615747763590?colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaByMzMzMzMzMiByMzMzY2OTkqC3RyYW5zcGFyZW50MgcjODg4ODg4OgcjMzMzMzMzQgcjMzM2Njk5SgcjMDAwMDAwUgcjMzM2Njk5Wgt0cmFuc3BhcmVudA%3D%3D\x26pageSize\x3d21\x26hl\x3dar\x26origin\x3dhttps://earn4read.blogspot.com");
              },
              'open': function(url) {
                window.followersIframe.close();
                followersIframeOpen(url);
              }
            }
          });
        }
      });
    }
    followersIframeOpen("https://www.blogger.com/followers/frame/3005819615747763590?colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaByMzMzMzMzMiByMzMzY2OTkqC3RyYW5zcGFyZW50MgcjODg4ODg4OgcjMzMzMzMzQgcjMzM2Njk5SgcjMDAwMDAwUgcjMzM2Njk5Wgt0cmFuc3BhcmVudA%3D%3D\x26pageSize\x3d21\x26hl\x3dar\x26origin\x3dhttps://earn4read.blogspot.com");
  </script></div>
</div>
</div>
<div class='clear'></div>
</div>
</div><div class='widget Profile' data-version='1' id='Profile1'>
<h2>من أنا</h2>
<div class='widget-content'>
<dl class='profile-datablock'>
<dt class='profile-data'>
<a class='profile-name-link g-profile' href='https://www.blogger.com/profile/17392399131636971396' rel='author' style='background-image: url(//www.blogger.com/img/logo-16.png);'>
Haisouss 
</a>
</dt>
</dl>
<a class='profile-link' href='https://www.blogger.com/profile/17392399131636971396' rel='author'>عرض الملف الشخصي الكامل الخاص بي</a>
<div class='clear'></div>
</div>
</div><div class='widget BlogArchive' data-version='1' id='BlogArchive1'>
<h2>أرشيف المدونة الإلكترونية</h2>
<div class='widget-content'>
<div id='ArchiveList'>
<div id='BlogArchive1_ArchiveList'>
<ul class='flat'>
<li class='archivedate'>
<a href='https://earn4read.blogspot.com/2025/08/'>أغسطس 2025</a> (2)
      </li>
<li class='archivedate'>
<a href='https://earn4read.blogspot.com/2025/07/'>يوليو 2025</a> (8)
      </li>
<li class='archivedate'>
<a href='https://earn4read.blogspot.com/2025/04/'>أبريل 2025</a> (3)
      </li>
</ul>
</div>
</div>
<div class='clear'></div>
</div>
</div>
<div class='widget ReportAbuse' data-version='1' id='ReportAbuse1'>
<h3 class='title'>
<a class='report_abuse' href='https://www.blogger.com/go/report-abuse' rel='noopener nofollow' target='_blank'>
الإبلاغ عن إساءة الاستخدام
</a>
</h3>
</div>
<div class='widget PageList' data-version='1' id='PageList1'>
<div class='widget-content'>
<ul>
<li>
<a href='http://earn4read.blogspot.com/'>Accueil</a>
</li>
<li>
<a href='https://earn4read.blogspot.com/p/blog-page.html'>اقرأ و اربح </a>
</li>
</ul>
<div class='clear'></div>
</div>
</div><div class='widget BlogSearch' data-version='1' id='BlogSearch1'>
<h2 class='title'>بحث هذه المدونة الإلكترونية</h2>
<div class='widget-content'>
<div id='BlogSearch1_form'>
<form action='https://earn4read.blogspot.com/search' class='gsc-search-box' target='_top'>
<table cellpadding='0' cellspacing='0' class='gsc-search-box'>
<tbody>
<tr>
<td class='gsc-input'>
<input autocomplete='off' class='gsc-input' name='q' size='10' title='search' type='text' value=''/>
</td>
<td class='gsc-search-button'>
<input class='gsc-search-button' title='search' type='submit' value='البحث'/>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<div class='clear'></div>
</div>
</div>

<div class='foot section' id='footer-3' name='التذييل'><div class='widget Attribution' data-version='1' id='Attribution1'>
<div class='widget-content' style='text-align: center;'>
المظهر: نافذة الصورة. يتم التشغيل بواسطة <a href='https://www.blogger.com' target='_blank'>Blogger</a>.
</div>
<div class='clear'></div>
</div></div>
</div>
</div>
<div class='footer-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</footer>

</div>
</div>
<div class='content-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</div>
<script type='text/javascript'>
    window.setTimeout(function() {
        document.body.className = document.body.className.replace('loading', '');
      }, 10);
  </script>

الأربعاء، 30 يوليو 2025

Admin Dashboard

Manage Users

Monitor Points

Content Reports